垂直和水平地將文本放置在圓角矩形內
[英]Centering text inside rounded rectangle vertically and horizontally
問題描述
我想在圓角矩形（垂直和水平）內居中放置文本，並且也將此橫幅也居中放置在頁面上，不確定如何正確地進行設置。 其他元素也需要居中。 請建議如何正確制作東西。 這是代碼：
#wrapper { position: relative; width: 80%; margin: auto; text-align: center; vertical-align: middle; } #rcorners { border-radius: 15px; border: 6px solid #ffffff; padding: 20px; width: 450px; height: 40px; } body { background-image: url(images/blaunew.png); background-color: #001b33; color: #ffffff; font-family: 'Roboto'; font-size: 14px; } #rcorners { font-family: 'Roboto'; font-size: 48px; font-weight: 700; font-style: normal; Helvetica, sans-serif; } p { font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif; } .main { margin-top: 20%; //font-size: 35px; } footer { font-size: 14px; }
<head> <title>centered construction</title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> </head> <body> <div id="wrapper"> <div class="main"> <h1 id="rcorners">Centered Text No1</h1> <p>LOREM IPSUM DOLOR </p> </div> <footer> <div>© Lorem Ipsum Dolor </div> </footer> </div>
3 個解決方案
解決方案1
1 已采納 2017-03-13 11:20:37
移除width: 450px; 和height: 40px #rcorners起#rcorners 。
否則，如果要使其寬度保持450px，則可以向#rcorners添加margin: auto 。 它將解決您的問題。
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); #wrapper { position: relative; width: 80%; margin: auto; text-align: center; vertical-align: middle; } #rcorners { border-radius: 15px; border: 6px solid #ffffff; padding: 20px; /* width: 450px; height: 40px; */ } body { background-image: url(images/blaunew.png); background-color: #001b33; color: #ffffff; font-family: 'Roboto';font-size: 14px; } #rcorners { font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif; } p { font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif; } .main { margin-top: 20%; //font-size: 35px; } footer { font-size: 14px; }
<div id="wrapper"> <div class="main"> <h1 id="rcorners">Centered Text No1</h1> <p>LOREM IPSUM DOLOR </p> </div> <footer> <div>© Lorem Ipsum Dolor </div> </footer> </div>
解決方案2
0 2017-03-13 11:34:46
要使按鈕居中添加margin: 0 auto並且要使文本居中，您可以使用flexbox輕松實現。 該代碼將類似於：
#rcorners {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
您可以在此處閱讀有關使用flexbox居中的更多信息： https ://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
解決方案3
0 2017-03-13 11:35:17
我已經編輯了您的CSS。 但是我不明白為什么你要在#rcorners元素上加高。 希望這個能對您有所幫助
的CSS
#wrapper {
position: relative;
width: 80%;
margin: auto;
text-align: center;
vertical-align: middle;
}
#rcorners {
border-radius: 15px;
border: 6px solid #ffffff;
padding: 20px;
width: 450px;
/*height: 40px; */ /*it is less height for 2 line text*/
}
body {
background-image: url(images/blaunew.png);
background-color: #001b33;
color: #ffffff;
font-family: 'Roboto';font-size: 14px;
}
#rcorners {
font-family: 'Roboto';font-size:48px;font-weight:700; font-style:normal; Helvetica, sans-serif;
}
p {
font-family: 'Roboto'; font-size: 32px; Helvetica, sans-serif;
}
.main {
margin-top: 20%;
margin-left: auto;
margin-right: auto;
display: inline-block;
width: auto;
/*font-size: 35px; */
}
footer {
font-size: 14px;
}
<a>垂直和水平</a>居中<a>作為顯示塊的</a>所有文本
[英]Centering all text of <a> as display block, vertically and horizontally
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.