水平对齐三个 div

Question

[Button 1] ["OR"] [Button]

如何对齐 3 个 div，第一个 div 包含按钮，第二个 div 包含段落，3 个 div 包含内部带有按钮的列表。

<div class="col-md-12">
  <div style="width: 50%;padding: 0;margin: 0">
    <button type="submit" style="width: 90% !important;  margin: 20px auto !important;"><p class="register-text">Register</p></button>
  </div>
  <div class="col-md-2">
    <p style="padding-top: 15px">OR</p>
  </div>
  <div class="eauth" style="width: 50%;padding: 0;margin: 0" id="w0">
    <ul class="eauth-list">
      <button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button>
    </ul>
  </div>
</div>

Fiddle Demo

Answer 1

看看DEMO CODE，我去掉了多余的html标签

Answer 2

如果您使用的是 bootstrap 4，则将 row 类添加到父类

.row p {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row align-items-center">
  <div class="col-md-5" style="">
    <button type="submit" style="width: 90% !important;  margin: 20px auto !important;"><p class="register-text">Register</p></button>
  </div>
  <div class="col-md-2">
    <p style="">OR</p>
  </div>
  <div class="col-md-5" class="eauth" style="" id="w0">
    <ul class="list-unstyled">
      <li><button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button></li>
      <li><button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button></li>
       <li><button style="width:90%" type="button" data-eauth-service="facebook">
             <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
       </button></li>
    </ul>

  </div>
</div>

Answer 3

你可以在这里试试这个代码：

如果您使用引导程序，请包含引导程序 CSS 并将父简单类 <div class="itemWrap"> 添加到 <div class="d-flex align-items-center"> 则不需要

.itemWrap {
    display: flex;
    align-items: flex-top;
}

如果添加引导 CSS，则不需要 avobe 代码

.itemWrap {
    display: flex;
    align-items: flex-top;
}
.dvi1,
.dvi2,
.dvi3 {
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
}
.div2 {
    background: gray;
    padding: 10px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul li {
    padding: 2px 0;
}

<div class="itemWrap">
    <div class="div1" style="width: 50%;padding: 0;margin: 0">
        <button type="submit" style="width: 90% !important;  margin: 20px auto !important;">
            <p class="register-text">Register</p>
        </button>
    </div>
    <div class="div2">
        <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th</p>
    </div>
    <div class="div3" style="width: 50%;padding: 0;margin: 0" id="w0">
        <ul class="eauth-list">
            <li>
                <button style="width:90%" type="button" data-eauth-service="facebook">
                    <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
                </button>
            </li>
            <li>
                <button type="button" data-eauth-service="facebook">
                    <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
                </button>
                <button type="button" data-eauth-service="facebook">
                    <i class="icon icon-facebook"></i><span>Sign-in with Facebook</span>
                </button>
            </li>
        </ul>
    </div>
</div>

Answer 4

这样试试，

<div class="row">
    <div class="col-md-4">Button1</div>
    <div class="col-md-4">Text</div>
    <div class="col-md-4">Button2</div>
</div>

有了这个，所有 3 个元素将在同一行内，我将它们分隔在相等的列中。您可以确保具有行类的 div 将是一个全宽，然后您的按钮和文本将平均共享行的宽度，并且将像您提到的那样水平对齐