Question

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

如何对齐3个div，第一个div包含Button，第二个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

您可以在此处尝试以下代码：

如果您使用引导程序，请包含引导程序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 2

尝试这样

<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个元素将在同一行内，我将它们分成相等的列。您可以确保带有row class的div为全宽，然后您的按钮和文本将平均共享行的宽度，并按照您提到的水平对齐

Answer 3

如果您使用的是引导程序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 4

看看DEMO CODE，我已经删除了多余的html标签

水平对齐三个div

4 个答案: