我想讓我的div2居中對齊，並使div3位於右側。如何使用CSS創建1 div中心對齊和其他浮動權利
我想這樣做，與文本對齊：中心主格，使浮動權DIV3但考慮主div的其餘部分使其中心對齊。我已經給顯示：內聯-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>添加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，然後對齊到中心，這不是預期會發生的事情。 –
我編輯了添加代碼片段的答案。據此，你需要什麼變化？ –
.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>的div是塊級元素，所以你可以使用自動的保證金在左側和右側將其放置在中間。
.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>
可以使用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>它爲我工作。謝謝 –
請使用此代碼嘗試：
<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>
請點擊這裏[https://jsfiddle.net/gfeo88fe/] –
.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">
\t \t Main<br/>
\t \t Content<br/>
\t </div>
\t <div class="contentCenter">
\t \t Center<br/>
\t \t Content<br/>
\t </div>
\t <div class="contentRight">
\t \t Right<br/>
\t \t Content<br/>
\t </div>這可能是滿足您的要求。
<!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財產留給財產性質可以在找到現場。
我在我的答案所做的是設置主DIV的位置相對其他子的div（DIV2和DIV3）作爲absoulute
爲了得到一個div來最右邊的角落，你設置正確的屬性爲0％
並居中一個div我使用右側和左側屬性50％。
我們需要代碼。請告訴我們你到目前爲止所嘗試過的。 –
設置div的寬度，當你需要在div中心 –
訪問下面的代碼我昨天回答[http://stackoverflow.com/questions/43450161/how-can-i-add-3-columns-in-an-html- page-using-css/43450339＃43450339] –