Question

我正在使用bootstrap来创建一个布局，但是，我似乎无法理解为什么显示：withline-block with vertical-align：middle isn＆not; tt work。

我宁愿不使用绝对位置。

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

任何帮助将不胜感激

HTML： 目前使用bootstrap来创建布局（navbar等）

<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;
}

Answer 1

垂直对齐：中部;适用于display：table-cell;即如果父div显示：table;

Answer 2

要在中间垂直对齐显示defmodule Rumbl.Auth do import Plug.Conn import Comeonin.Bcrypt, only: [checkpw: 2, dummy_checkpw: 0] import Phoenix.Controller alias Rumbl.Router.Helpers def init(opts) do Keyword.fetch!(opts, :repo) end def call(conn, repo) do user_id = get_session(conn, :user_id) user = user_id && repo.get(Rumbl.User, user_id) assign(conn, :current_user, user) end def login_by_username_and_pass(conn, username, given_pass, opts) do repo = Keyword.fetch!(opts, :repo) user = repo.get_by(Rumbl.User, username: username) cond do user && checkpw(given_pass, user.password_hash) -> {:ok, login(conn, user)} user -> {:error, :unauthorized, conn} true -> dummy_checkpw() {:error, :not_found, conn} end end def login(conn, user) do conn |> assign(:current_user, user) |> put_session(:user_id, user.id) |> configure_session(renew: true) end def logout(conn) do configure_session(conn, drop: true) end def authenticate_user(conn, _opts) do if conn.assigns.current_user do conn else conn |> put_flash(:error, "You must be logged in to access that page") |> redirect(to: page_path(conn, :index)) |> halt() end end end块，您需要分别对父级和子级使用显示<div>和table。

查看更新的 Fiddle （jsFiddle）

就像：

table-cell

希望这有帮助！

Answer 3

因为css flexbox几乎到处都是supported我会使用它，因为它使垂直对齐非常容易：

.wrapper {
  display:flex;
  align-items:center;
  justify-content:center;
}

演示：https://jsfiddle.net/7totjt2p/2/

显示内联块（垂直中心）不工作 - 引导程序

3 个答案: