我正在使用引导程序来创建布局,但是,我似乎无法理解为什么display:inline-block with vertical-align:middle无法正常工作。

我宁愿不要使用绝对位置。

JSFiddle:https://jsfiddle.net/yheep9hh/

任何帮助,将不胜感激

HTML:
当前正在使用引导程序来创建布局(导航栏等)

<header>
        <nav class="navbar navbar-transparent">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">hello</a></div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="active" href="/Home">Home</a></li>
                        <li><a href="/Website Design">Website Design</a></li>
                        <li><a href="/Tech Support">Tech Support</a></li>
                        <li><a href="/Data Security">Data Security</a></li>
                        <li><a href="/Networking">Networking</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container-fluid wrapper bgImage">
        <div class="indexWelcome">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="text-center">Welcome To Amparo Tech</h1>
                    <h3 class="text-center">How Can We Help You?</h3></div>
            </div>
            <div class="row input-fixedWidth">
                <div class="col-md-12">
                    <form class="homeForm" method="POST">
                        <div class="row">
                            <div class="col-sm-8 col-sm-push-2 col-md-8">
                                <input class="homeFormEmail" type="text" name="email" placeholder="Email">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8 col-sm-push-2 col-md-8">
                                <input class="homeFormPostcode" type="text" name="postcode" placeholder="Postcode">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8 col-sm-push-2 col-md-8">
                                <textarea class="homeFormMessage" name="message" placeholder="Your Message or Tech Issue"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
            <div class="push"></div>
    </div>
    <footer class="footer">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-4 text-left pull-left">
                    <p>name</p>
                </div>
                <div class="col-md-4 text-right pull-right">
                    <p>number</p>
                </div>
                <div class="col-md-4 text-center">
                    <p>address</p>
                </div>
            </div>
        </div>
    </footer>


CSS:
自定义CSS

* {
  box-sizing: border-box;
}

html,
body {
  height:100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin:0 auto;
  margin-bottom: 10px;
}

.wrapper {
  min-height:calc(100% - 82px);
  margin: 0 auto -10px;
}

.footer, .push {
  height: 10px;
}

.navbar {
  margin:0;
  height:52px;
}

input, textarea {
  width: 100%;
  margin:0 auto;
}

.input-fixedWidth {
  max-width:750px;
  margin: 0 auto;
}

.formWrapper {
  position:relative;
}


.indexWelcome {
    display:inline-block;
    vertical-align:middle;
    width: 100%;
    text-align:center;
}


.navbar-transparent {
  background-color: transparent;
}

.homeFormEmail {
  margin-top: 20px;
}

.homeFormEmail,
.homeFormPostcode,
.homeFormMessage {
  text-indent: 10px;
  margin-bottom: 15px;
  font-size:14px;
}

.homeFormEmail,
.homeFormPostcode {
  height:40px;
}

.homeFormMessage {
  height: 80px;
  padding-top:10px;
  resize: vertical;
}

最佳答案

垂直对齐:中间;与display:table-cell配合使用;也就是说,如果父div是display:table;

09-30 13:29
查看更多