如何正确居中垂直文本

Question

一整天，我几乎阅读了所有关于竖排文本的内容，但我终其一生都找不到解决方案来解决我认为应该非常容易做到的事情。我有一个header。其中，必须并排水平排列三个项目。第一张是图片，第二张可以是任何东西，但尺寸必须是 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>

这应该会在 header 容器中并排生成三个简单的项目。现在到处都是——甚至不在同一条线上！（我不需要红色框，但它可以让我知道我离我真正需要的东西还有多远——第二张图片设置为 748 以说明该边界）。我很困惑，这样一件看似容易的事情做起来很难。无论如何可以解决我？

Answer 1

您的 css 代码可能是这样的

    #header img.img-left {
    position: absolute;
    float: left;
    top:0;
}

#box p {
    position: absolute;
    left: 25%;
}


#header img.img-right {
    position: absolute;
    right: 0;
    top: 0;
}

Answer 2

你考虑过使用 flex box 吗？对于您要尝试做的事情，这似乎是一个非常简单的解决方案。

.header {
    display:flex;
    align-items: center;
 }

这是未经测试的，但基本上页眉中的所有项目都应该垂直居中。我会在这里阅读有关 flexbox 的内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

好的。我知道这很容易做到，但我想我只需要冷静下来，发泄挫败感并仔细考虑一下。所以，这里适用于那些可能有同样问题的人。我按照 html 中出现的顺序将所有内容浮动到左侧（最简单的情况）。为了修复对齐，我需要在页眉容器上添加一个 position:relative（因为页面以视口为中心）。对于竖排文本，请参阅 verticaltext class 和 verticaltext id 的 css - 高度和宽度已互换。不知何故，两组维度都是必需的。行高等于宽度将确保它居中。 white-space:nowrap 也很重要（当然要确保你的文字符合你的space）。

修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Homepage</title>
    <meta charset="UTF-8">
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <link href="css/mycss.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="maincontainer">
        <div id="header">               
            <div>
                <img src="image/left_pic.jpg" alt="left_pic" height=150 width=260>
            </div>
            <div id="verticaltext">                 
                <p class="verticaltext">vertical text</p>
            </div>              
            <div>
                <img src="image/right_pic.jpg" alt="right_pic" height=150 width=740>
            </div>
        </div>
    </div>
</body>
<html>

这里是 CSS:

#maincontainer{
width: 1020px; 
margin: 0 auto; /*Center container on page*/
}

#header{
    position: relative;
    height: 150px; 
    width: 100%;
}

#header >div{
    float: left;
}

#verticaltext{
    width: 20px;
    height: 150px;
}

.verticaltext{
    font-size: 0.600em;
    line-height: 20px;
    padding: 0;
    margin: 0;
    height: 20px;
    width: 150px;
    white-space: nowrap;
    text-align: center;    
    transform: rotate(-90deg) translate(-100%, 0);
    transform-origin: 0 0;
}

感谢所有花时间阅读本文并冒险回答的人。非常感激。 E L

Answer 4

根据您的 post，我了解到您想将 header 项目水平并排放置，所有这些都必须居中。

您可以在主容器上使用 display:flex 和 margin:0 auto 使内容居中

检查这个片段

#maincontainer {
  width: 1020px;
  margin: 0 auto;
  /*Width of main container*/
  /*Center container on page*/
}
#header {
  display: flex;
  height: 150px;
  /*Height of top section*/
}
#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">

      <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>
</body>

希望对您有所帮助

Answer 5

    #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>

你的代码哪里有很多错误，我想这就是你想要纠正的？如果是这样，请告诉我，我会解释你遇到的所有错误

如何正确居中垂直文本

How to properly center vertical text

html

css

vertical-text