Question

as you can see the border right is all the way at the right of the header I want to move it closer to the middle text.

[1]: https://i.stack.imgur.com/HRYwR.png

 #header {
font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
margin: 0;
background-color: #2E7061;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
}


 #title {
   color: white;
   text-align: center;
   padding:10px 5px 20px 5px;
   margin-right: 20px;
   margin: -.1px;
   font-size: 1.7em;
   border-right: 1px solid white;
 }

html

<body>
     <div id="header">
     <img src="Capture1.png"/>
     <p id="title">THE Text</p>


     </div>
     </body>

Answer 1

你可以把它添加到你的css #title

display: inline-block;

将是，

#title {
 display: inline-block;
 color: white;
 text-align: center;
 padding:10px 5px 20px 5px;
 margin-right: 20px;
 margin: -.1px;
 font-size: 1.7em;
 border-right: 1px solid white;

我希望它能解决你的问题

Answer 2

您提供的代码不足以重现您在图片中显示的内容。但我会假设你的图像暂时浮动。

    #header {
      font-family: "NotoNashkArabic", "ProximaNova-regular", "Helvetica Neue", "Helvetica", Roboto, Arial, sans-serif;
      margin: 0;
      background-color: #2E7061;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
      height: 80px;
    }
    #header img{ 
      float: left;
    }
    #title {
      color: white;
      text-align: right;
      padding-right: 20px;
      margin-right: 20px;
      margin: -.1px;
      font-size: 1.7em;
      border-right: 1px solid white;
      width: 50%;
      margin-left: 200px;
      height: 100%;
      line-height:80px;
    }

<body>
  <div id="header">
    <img src="http://placehold.it/200x80.png">
    <p id="title">THE Text</p>
  </div>
</body>

我在这里做的是：

在width: 50%上设置#title。（任意值）
我将左边距设置为图像的宽度（我估计为200px。）原因是图像浮动时图片与＆lt; p＆gt; -tag的宽度重叠。我认为这些值没有重叠更为简洁。
我将文本对齐，使其靠近边框。使用'padding-right'来控制文本和边框之间的空间。
我删除了垂直填充，并将行高设置为标题/图像的高度，以使文本垂直居中，边框从标题的顶部到底部到达。

其他注意事项：

margin-right: 20px;  // This has no meaning...
margin: -.1px;       // ...since it gets overridden by this.

如何在不移动文本的情况下移动边框墙？

2 个答案:

其他注意事项：