一整天，我已经阅读了几乎所有关于垂直文本主题的内容，但我终其一生都找不到解决方案来解决我认为应该非常容易做到的事情。我有一个标题。其中，必须并排水平排列三个元素。第一张是图片，第二张可以是任何东西，但尺寸必须是 20 X 150 (WxH)(或适合该尺寸)，然后是另一张图片。 这是我所拥有的:
#maincontainer{
width: 1020px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#header{
height: 150px; /*Height of top section*/
float: left;
}
#box{
width: 20px;
height: 150px;
border: 1px solid red;
}
.verticaltext{
font-size: 0.600em;
text-align: center;
border: 1px solid red;
transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;
} <body>
<div id="maincontainer">
<div id="header">
<div>
<img src="image/left_pic.jpg" alt="left_pic" height=150 width=250>
<div id="box">
<p class="verticaltext">vertical text</p>
</div>
<img src="image/right_picture.jpg" alt="right_pic" height=150 width=748>
</div>
</div>
</div>
</body>这应该会在标题容器中并排生成三个简单的元素。现在到处都是——甚至不在同一条线上! (我不需要红色框，但它可以让我知道我离我真正需要的东西还有多远——第二张图片设置为 748 以说明该边界)。我很困惑，这样一件看似容易的事情做起来很难。无论如何可以解决我？
最佳答案
#maincontainer{
width: 1020px; /*Width of main container*/
height: 700px;
margin: 0 auto; /*Center container on page*/
}
#header{
width: 1000px;
min-height: 150px; /*Height of top section*/
float: left;
}
.box{
width: 250px;
height: 150px;
border: 1px solid red;
float:left;
margin-left:10x;
}
.verticaltext{
font-size: 16px;
float:left;
margin-left: 10px;
margin-right: 10px;
vertical-align:middle;
line-height:150px;
transform:rotate(270deg);
} <body>
<div id="maincontainer">
<div id="header">
<div class="box">
<img src="image/left_pic.jpg" alt="left_pic" height="150px" width="250px" />
</div>
<div class="verticaltext">
Vertical text
</div>
<div class="box">
<img src="image/right_picture.jpg" alt="right_pic" height="150px" width="748px">
</div>
</div>
</div>
</body>您的代码中有很多错误，我认为这是您想要纠正的？如果是这样，请告诉我，我会解释你遇到的所有错误
关于html - 如何正确居中垂直文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40943892/