水平对齐三个 div

Posted 2023-03-05

【中文标题】水平对齐三个 div

【英文标题】：Align three divs horizontally

【发布时间】：2019-08-25 21:05:21

【问题描述】：

[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

【问题讨论】：

您必须使用内联样式还是可以使用单独的 CSS 样式表？我看到你正在使用 Bootstrap col 类，你的项目中添加了 bootstrap 吗？

指定你正在使用哪个版本的引导程序，如果你使用的是 BS4，那么你很幸运，你可以简单地使用垂直对齐帮助器 getbootstrap.com/docs/4.0/utilities/vertical-align 否则你将不得不使用 flex盒子philipwalton.github.io/solved-by-flexbox/demos/…

正如米海所说。你实际上甚至在使用引导程序吗？没有看到您导入引导样式。

【参考方案1】：

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

【参考方案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>

【参考方案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>

【参考方案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 将是一个全宽，然后您的按钮和文本将平均共享行的宽度，并且将像您提到的那样水平对齐

【讨论】：

@DavidThomas Op 询问 如何对齐 3 个 div，第一个 div 包含按钮，第二个 div 包含段落，3 个 div 包含内部带有按钮的列表。 这不是完整的答案，但只是样板

@DavidThomas 添加了一个小描述，现在怎么样？

谢谢，这绝对是一个进步。