Question

我一直试图将文本居中并将更多文本放在它旁边的同一行中，同时保持整个事物的中心位于第一个文本而不是整行。有一个简单的方法吗？

到目前为止，我尝试过的所有解决方案都是以整条生产线为中心，或者未能将所有内容放在同一条线上。当然我也搜索了stackoverflow但找不到解决方案。我把它作为一个样机：http://jsfiddle.net/mzqC5/

它应该表现的方式是对齐以“A”为中心而不是整行。我很感激任何帮助，因为我现在一直在努力解决这个问题。

非常感谢。

<div class="centered">A<div class="subtext">[24]</div>

.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
}

Answer 1

实现这一目标的一种方法是使用相对定位的A绝对定位[24]。

.centered {
    font-family: Meiryo, sans-serif;
    font-size: 75px;
    text-align: center;
    color: black;
    background-color: cornflowerblue;
    max-width: 175px;
    margin: 0 auto;
    position: relative;
}
.subtext {
    font-family: Arial;
    font-size: 24px;
    display: inline-block;
    position: absolute;
    bottom: 24px;
}

enter image description here

因为元素是绝对定位的，所以它不在文档流中，并且不会影响文本对齐。

您可以调整bottom将其向上移动。

Answer 2

您可以像这样设置（添加红线只是为了演示页面中心）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    text-align: center; 
    height: 100%;
}

span {
    position: relative;
}

b {
    position: absolute; 
    left: 100%; 
    font-weight: normal;
}


html, body {height: 100%;}
body {padding: 0; margin: 0;}
div::after {content: ''; height: 100%; width: 2px; background: red; left: 50%; margin-left: -1px; position:absolute;}
</style>
</head>
<body>

<div>
    <span>
        A
        <b>[24]</b>
    </span>
</div>

</body>
</html>

保持一个元素的中心对齐而不是整行

2 个答案: