将文本置于屏幕右侧 66% 的中心位置？

Question

我的布局在屏幕的左上角显示一个徽标，我想在其右侧显示一个 header 文本。我发现在响应式布局中，无论屏幕宽度如何，如果我能够将 header 文本居中放置在屏幕右侧 66% 的位置，它看起来会很不错。 CSS 有什么聪明的方法可以实现吗？

基本上，我当前的布局代码就像

<div id="header">
 <div id="title">
 </div>
</div>

和CSS

.header {width:100%; height:92px; overflow:hidden; position:relative; background:#7196CB url(/css/header_logo.jpg) no-repeat;}

Answer 1

是的，很简单：

.title {
    float: right;
    text-align: center;
    width: 66%;
}

在使用 float 后，您可能想在 .header 元素中引入一个 clearfix 元素。

.header {
  border-bottom: 1px solid #bbb;
}

.title {
  background: #eee;
  float: right;
  text-align: center;
  width: 66%;
}

<div class="header">
  <div class="title">
    Hello, world!
  </div>
  <br style="clear: both" />
</div>

Position text centered in the right 66% of the screen?