這個問題在這里已經有了答案： 如何水平居中元素？ (130 個回答) Flexbox：水平和垂直居中 （14個答案） 9 小時前關閉。
你能告訴我如何像這張圖片一樣將 div 居中： https ://i.postimg.cc/PJbZTYTg/notice.png
這就是我所做的：
<tr id="statusrow">
<td colspan="2" class="textnormal">
<script type="application/javascript" nonce="">
window.addEventListener("load", () => {
document.querySelector('#content input[type="text"]') ? .setAttribute("aria-describedby", "primaryStatusContent");
});
</script>
<div class="statusindicator statusinfo" style="margin:auto; padding:60px;">
<div style="background-color:yellow;"> Notice </div>
<div class="statuscontent" role="alert" id="primaryStatusContent" style="background-color:powderblue; color:red; font-size:120%; margin:-25px 0 0 -35px; padding:10px;"> If you are an external user who works with the state organization within the Commonwealth of Massachusetts and needs to exchange files, please contact your agency to request access.</div>
</div>
</td>
</tr>但是黃色的 div 不是在頂部，而是在另一個 div 的下方。
uj5u.com熱心網友回復：
為什么不使用 flex。這是我最近學到的最好的東西，并且極大地幫助了我正確放置 div。
假設你的黃色 div 是 div-yellow，另一個 div 是 div-details，這就是你可以做的
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<div class="div-yellow">My text heree</div>
<div class="div-details">Details here are the things that i want to show</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
嗯，它的使用很簡單flexbox。
解釋樣式：
display: flex使您的元素靈活。flex-direction: column使您div的專案垂直對齊。align-items: center讓您的物品水平居中。
.containers {
display: flex;
flex-direction: column;
align-items: center;
}
.yellow-container {
background-color: yellow;
color: red;
width: fit-content;
font-weight: bolder;
}
.blue-container {
background-color: #9ACD32;
color: black;
font-size: 100%;
width: fit-content;
}<div class="containers">
<div class="yellow-container">Notice for External Uses</div>
<div class="blue-container"> If you are an external user who works with the state organization within the Commonwealth of Massachusetts and needs to exchange files, please contact your agency to request access.</div>
</div>uj5u.com熱心網友回復：
在這里，我使用該屬性在第一個和第二個上margin自動居中。這是為了讓寬度完全適合內容，從而正常作業。divdivdivwidth: fit-content;margin: 0 auto
divsCSS 中還有很多其他的居中方法，你可以在這里閱讀更多
<tr id="statusrow">
<td colspan="2" class="textnormal">
<script type="application/javascript" nonce="">
window.addEventListener("load", () => {
document.querySelector('#content input[type="text"]') ? .setAttribute("aria-describedby", "primaryStatusContent");
});
</script>
<div class="statusindicator statusinfo" style="margin:auto; padding:60px;">
<div style="background-color:yellow; width: fit-content; margin: 0 auto; "> Notice </div>
<div class="statuscontent" role="alert" id="primaryStatusContent" style="background-color:powderblue; color:red; font-size:120%; margin:0 auto; padding:10px;"> If you are an external user who works with the state organization within the Commonwealth of Massachusetts and needs to exchange files, please contact your agency to request access.</div>
</div>
</td>
</tr>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/516337.html
標籤：htmlcss
上一篇：如何以訊息樣式格式對齊？