在保持垂直对齐的同时不会损失垂直对齐的水平对齐

在HTML中，我有两个元素，一个包含文本，另一个包含几个按钮。在保持垂直对齐的同时不会损失垂直对齐的水平对齐

而是在中间的接触，我希望他们分开，调整到左，右页边距。所以我希望我的文本与左边距对齐，并且我的按钮与右边距对齐，而不会丢失其垂直对齐，因为。

我还碰巧使用引导3.

当我使用pull-left/pull-right，float:left/float:right，或align="left"/align="right"，我得到了这两个元素的垂直取向的变化。

配对下来的代码看起来像这样主要为：

<div style="width:200px;height:100px"> 
    Delete dashboard? 
    <button class="btn btn-secondary cancel"> 
     Cancel 
    </button> 
    <button class="btn btn-danger"> 
     Delete 
    </button> 
</div>

什么是最直接的方式来调整这些项目的左，右页边距？我可以用桌子做，但那不是理想的方式吗？

[！[A模式范例] [2] [2]

来源

2017-05-02 BBaysinger

请发布您的代码，并复制当前屏幕截图中的内容。 –

需要查看代码 – ZimSystem

我添加了一个代码示例。真的很简单。挑战在于保持左侧和右侧元素垂直对齐。 – BBaysinger

没有看到你的代码，我会用柔性布局。 flex row中的键是使用justify-content: space-between将该行中的2个孩子推到最远的边缘。然后父母上的align-items将设置垂直对齐。

.flex { 
 
    display: flex; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
    max-width: 250px; 
 
    border: 1px solid black; 
 
} 
 
.bot { 
 
    border-top: 1px solid #ccc; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
}

<div class="flex col"> 
 
    <div> 
 
    <h1>confirm</h1> 
 
    </div> 
 
    <div class="flex bot"> 
 
    <p>delete dashboard</p> 
 
    <div> 
 
     <button>cancel</button> 
 
     <button>delete</button> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-05-02 19:00:14

这个怎么样？

<div class="row"> 
    <div class="col-md-6">Dashboard</div> 
    <div class="col-md-6 text-right">Cancel Delete</div> 
</div>

这会将您的区域分成两列，其中右列的所有内容将右对齐，而不会影响元素本身的CSS。

来源

2017-05-02 19:03:11

在保持垂直对齐的同时不会损失垂直对齐的水平对齐

回答

相关问题