我的 child Div 之一拒绝以 text-align:Center 为中心

Question

我遇到了一个奇怪的问题，我只是想将我的 parent div 垂直和水平居中，同时保持左对齐 child div（文本， divs 等）。 这就是我想要的：

但是当我尝试将 text-align:center 添加到 parent 容器时，我得到的是：

这是我的 Fiddle，没有 text-align:center，我已经为此工作了很多天，无论我做什么，我都无法让文本保持左对齐当他们居中时， child div （数字）拒绝居中。 有人可以告诉我如何在保持左对齐的同时正确地垂直和水平居中我的 Parent 容器吗？

这是我的 CSS:

.bigwrapper {display:table; height:100vh;  width: 100%; }

.listwrapper {background:#fff; vertical-align:middle!important;display:table-cell; }

.point {
    padding-bottom: 10px;
    padding-top: 10px;
    white-space: nowrap;
}

.message {
    display: inline-block;
}
.title {
    color: black;
    white-space: normal;
    margin-right: 60px; font-size:19px;
}
.info {
    color: #999;
    white-space: normal;
    margin-right: 60px; margin-top:5px;
}

.number {
      font: 36px Arial, sans-serif;
    width: 46px;
    height: 46px;vertical-align:bottom;
    margin-right: 10px; margin-top:5px;
    float: left;
    text-align: center;
}

.number {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
}




.listwrapper p {
  font-size: 13px !important; font-weight:bold; color:#333;
}


.listwrapper .form-control {min-width:100%!important; height:35px; font-size:13px; padding-top:0px; padding-bottom:0px; display:inline-block;}
.listwrapper .btn {min-width:100%!important; display:block; height:35px; font-size:12px; margin-top:10px;}

.listwrapper .btn {background:#333 !important; color:#fff !important; font-weight:bold;}

.listwrapper .btn:hover {background:#000 !important; color:#fff !important;}

HTML

<div class="bigwrapper">
    <div class="listwrapper">

        <div class="point">
            <div class="number">1</div>
            <div class="message">
                <div class="title">Upload your media and get discovered</div>
                <div class="info">Share, find, buy, or sell any type of content with the help of filters</div>
            </div>
        </div>

        <div class="point">
            <div class="number">2</div>
            <div class="message">
                <div class="title">Represent your city everytime you post</div>
                <div class="info">Raise local awareness with tags linked to content in your area</div>
            </div>
        </div>


         <div class="point">
            <div class="number">3</div>
            <div class="message">
                <div class="title">Make real connections with users nearby</div>
           <div class="info">Connect with neighbors, friends, fans, and rising stars in your city</div>
            </div>
        </div>

     <div class="point">
            <div class="number">4</div>
            <div class="message">
                <div class="title">Get started by typing your email address</div>

                     <div class="guestlist">
                <form class="guestlist-form form-inline" action="signup" method="post">
           <input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
           <input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!"> 
                </form>
              <div id="error-message"></div><span class="spam">Don't worry we won't spam</span>
             </div> 

            </div>
        </div>

    </div>
    </div>

Answer 1

您可以将 display: flex; align-items: center; justify-content: center; 添加到 .bigwrapper 以使包含所有内容的元素居中 .listwrapper。

align-items: center 将 .listwrapper 在 .bigwrapper 内垂直居中，justify-content: center; 将其水平对齐。

.point {
  padding-bottom: 10px;
  padding-top: 10px;
  white-space: nowrap;
}

.message {
  display: inline-block;
}

.title {
  color: black;
  white-space: normal;
  margin-right: 60px;
  font-size: 19px;
}

.info {
  color: #999;
  white-space: normal;
  margin-right: 60px;
  margin-top: 5px;
}

.number {
  font: 36px Arial, sans-serif;
  width: 46px;
  height: 46px;
  vertical-align: bottom;
  margin-right: 10px;
  margin-top: 5px;
  float: left;
  text-align: center;
}

.number {
  border-radius: 50%;
  behavior: url(PIE.htc);
  /* remove if you don't care about IE8 */
  background: #333;
  border: 2px solid #333;
  color: #fff;
  text-align: center;
}

.listwrapper p {
  font-size: 13px !important;
  font-weight: bold;
  color: #333;
}

.listwrapper .form-control {
  min-width: 100%!important;
  height: 35px;
  font-size: 13px;
  padding-top: 0px;
  padding-bottom: 0px;
  display: inline-block;
}

.listwrapper .btn {
  min-width: 100%!important;
  display: block;
  height: 35px;
  font-size: 12px;
  margin-top: 10px;
}

.listwrapper .btn {
  background: #333 !important;
  color: #fff !important;
  font-weight: bold;
}

.listwrapper .btn:hover {
  background: #000 !important;
  color: #fff !important;
}

.bigwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  width: 100%;
}

.listwrapper {
  background: #fff;
  vertical-align: middle!important;
  display: table-cell;
}

<body>
  <div class="bigwrapper">
    <div class="listwrapper">

      <div class="point">
        <div class="number">1</div>
        <div class="message">
          <div class="title">Upload your media and get discovered</div>
          <div class="info">Share, find, buy, or sell any type of content with the help of filters</div>
        </div>
      </div>

      <div class="point">
        <div class="number">2</div>
        <div class="message">
          <div class="title">Represent your city everytime you post</div>
          <div class="info">Raise local awareness with tags linked to content in your area</div>
        </div>
      </div>


      <div class="point">
        <div class="number">3</div>
        <div class="message">
          <div class="title">Make real connections with users nearby</div>
          <div class="info">Connect with neighbors, friends, fans, and rising stars in your city</div>
        </div>
      </div>

      <div class="point">
        <div class="number">4</div>
        <div class="message">
          <div class="title">Get started by typing your email address</div>

          <div class="guestlist">
            <form class="guestlist-form form-inline" action="signup" method="post">
              <input name="emailaddress" class="form-control input-lg" id="enterfield" type="email" title="Enter Email Address" class="guestlistfield" placeholder="Enter your Email" />
              <input class="button btn-lg btn" title="Enter Email" name="submit" type="submit" autofocus="autofocus" value="Sign up!">
            </form>
            <div id="error-message"></div><span class="spam">Don't worry we won't spam</span>
          </div>

        </div>
      </div>

    </div>
  </div>
</body>

Answer 2

您可以将子 div-s 设置为 display:inline-block;，然后将其设置为父 width:100%;text-align:center;

但要垂直居中您需要使用 jQuery 或重新设计您的布局并将左元素和右元素设置为 display:inline-block 在一个容器中 text-align:center; 然后使用垂直- 左右元素对齐属性。

Answer 3

尝试将 "big-wrapper" class 的 css 修改为：

.bigwrapper {
    position: relative;
    top: 50%;
    left: 50%;
    display: table;
}

我的 child Div 之一拒绝以 text-align:Center 为中心

One of my child Div's refuses to be centered with text-align:Center

html

css

text-alignment