考慮以下片段:
div {
display: flex;
flex: 0 0 45%;
max-width: 45%;
}
<div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.</div>
目前看起來像 在此處輸入影像描述
但我想在這里對齊 輸入影像描述
uj5u.com熱心網友回復:
您可以用其他 div 包裹。
.wrapper {
max-width: 45%;
display: flex;
flex: 0 0 45%;
}
<div class="wrapper">
<div>
Lorem ipsum dolor sit amet, <strong >dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.
</div>
</div>
.flex-container {
max-width: 45%;
flex: 0 0 45%;
display: flex;
}
.flex-container div {
background: gray;
padding: 10px;
margin: 10px;
}
.w {
color: green;
position: relative;
}
<div class="flex-container">
<div>
Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.
</div>
<div>
Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.
</div>
</div>
uj5u.com熱心網友回復:
div {
float: left;
max-width: 45vw;
}
uj5u.com熱心網友回復:
你不需要 flex 來居中 div。您可以使用margin. 檢查以下代碼片段。
div {
background:gray;
width:45%;
margin-left:auto;
margin-right:auto;
}
<div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/390302.html
