如何使用 CSS 使 1 个 div 居中对齐和其他浮动正确 [重复]
Posted
技术标签:
【中文标题】如何使用 CSS 使 1 个 div 居中对齐和其他浮动正确 [重复]【英文标题】：How to make 1 div centre align and other float right using CSS [duplicate] 【发布时间】：2017-09-13 19:57:03 【问题描述】：我想让我的 div2 居中对齐，div3 居中。
我尝试使用 text align: center for main div 并使其浮动到 div3，但它通过考虑主 div 的剩余部分使其居中对齐。我已将 display: inline-flex 赋予主 div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>【问题讨论】：
我们需要代码。请向我们展示您到目前为止所做的尝试。 在div中心设置div的宽度 访问下面我昨天回答的代码。[***.com/questions/43450161/… 但是如果两个 div 在小屏幕上开始重叠可以吗？浮动的优点之一是它可以避免重叠。 【参考方案1】：请尝试使用此代码：
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
【讨论】：
【参考方案2】：.main
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
.main .div1
display: inline-block;
border: 1px solid;
.main .div2
float: right;
border: 1px solid;
display: inline-block;
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>【讨论】：
【参考方案3】：Divs 是块级元素，所以你可以在左右两边使用 auto 的边距来将它放在中间。
.center
margin: 0 auto;
.right
float: right;
在 html 中，您需要调整 div 的顺序。将 div 3 放在 div 2 之前，这样当您浮动它时，它们会出现在同一行：
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
【讨论】：
【参考方案4】：您可以将position:relative 用于主，将position:absolute 用于另一个div，它也可以垂直居中
.main
text-align: center;
background-color: red;
height: 50px;
position: relative;
.div2
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.div3
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>【讨论】：
它对我有用。谢谢【参考方案5】：将style="margin: auto;" 添加到您的 div2 元素。和
style="margin-left: auto;" 到您的 div3 元素。
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>【讨论】：
它确实有效，但它给了我结果，就像我附加的第二张图片一样。我希望 div 2 考虑主 div 的宽度并居中对齐。现在它只考虑 width = main div - div3 然后对齐到中心，这不是预期会发生的。 我已经编辑了答案，添加了一个代码 sn-p。据此，您需要进行哪些更改？【参考方案6】：.contentmain
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
.contentCenter
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
.contentRight
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>这可能满足您的要求。
【讨论】：
【参考方案7】：<!DOCTYPE html>
<head>
<style>
.div0
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
.div1
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
.div2
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
基本上，您可以通过使用 CSS 的 position 属性以及 right 和 left 属性来实现这一点，您可以参考更多信息 Position 和 right 的财产左侧财产可以在网站上找到。
我在回答中所做的是将主 div 设置为位置 relative 并将其他子 div（div2 和 div3）设置为 absoulute
要将一个 div 设置到最右边的角落，请将 right 属性设置为 0% 为了使 div 居中，我在左右属性上都使用了 50%。
【讨论】：
以上是关于如何使用 CSS 使 1 个 div 居中对齐和其他浮动正确 [重复]的主要内容，如果未能解决你的问题，请参考以下文章