HTML / CSS-左對齊並居中同一行
[英]HTML/CSS - Left Align and center on same line
問題描述
我想在HTML和CSS的同一行上左對齊某些文本並將另一文本居中。 我還希望在左對齊的文本上留一個margin-left 。
這是我目前的方法：
HTML ：
<div id="wrapper">
<h1 class="align-left">LEFT</h1>
<h1>CENTER</h1>
</div>
CSS ：
.align-left {
float: left;
margin-left: 20px;
}
#wrapper {
text-align: center;
}
這適用於左對齊和右對齊，但是頁邊距也會推動居中的文本。 我認為這是因為float: left在頁面流中保留了左對齊的文本。
非常感謝你:)
4 個解決方案
解決方案1
5 已采納 2016-06-04 09:06:39
這樣使用
<div id="wrapper">
<h1 class="align-left">LEFT</h1>
<h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left {
text-align:left;
padding:0;
margin:0;
position:absolute;
}
h1.align-center{
text-align: center;
}
</style>
另一種方式：
<div id="wrapper">
<h1 class="align-left">LEFT</h1>
<h1 class="align-center">CENTER</h1>
</div>
<style>
h1.align-left{
padding:0;
margin:0;
position:absolute;
}
#wrapper {
text-align:left;
}
h1.align-center{
text-align: center;
}
</style>
解決方案2
2 2016-06-04 09:06:02
您只需要調整HTML：
<div id="wrapper">
<h1><span class="align-left">LEFT</span>CENTER</h1>
</div>
如果您不希望隨着左文本變長而調整中心文本，請使用定位CSS（使用我發布的相同HTML）。
.align-left {
position: absolute;
left: 20px;
}
#wrapper {
text-align: center;
position: relative;
}
要知道......如果你不想中心的文本進行調整， 有可能是文本會重疊。
解決方案3
2 2016-06-04 09:10:41
我的兩分錢。
CSS代碼：
h1{
display: inline-block;
}
#center{
text-align: center;
width: 80%;
}
#wrapper {
width: 100%;
}
HTML代碼：
<div id="wrapper">
<h1 id="left">LEFT</h1>
<h1 id="center">CENTER</h1>
</div>
解決方案4
2 2016-06-04 09:38:04
您可以使用以下代碼來實現。 文章標簽的順序無關緊要，css會小心地正確放置它們。
<!DOCTYPE html> <html> <head> <style type="text/css"> section { border: 1px solid #ff0000; overflow: hidden; position: relative; width: 100%; } section article.txt { border: 1px solid green; max-width: 35%; } section article.left { float: left; } section article.right { float: right; } section article.center { --width: 300px; position: absolute; margin: 0 50%; left: calc((var(--width) / 2) - var(--width)); width: var(--width); } </style> </head> <body> <section> <article class="txt left">Text LEFT side</article> <article class="txt right">Text RIGHT side</article> <article class="txt center">Text CENTER</article> </section> </body> </html>
HTML / CSS - 左右對齊在同一行？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.