修改标题CSS以在两个不同位置中包含文本

Question

我有一个标题，该标头链接到左侧的另一页。我还需要在标题中心放置一个标题，但不想使用Navbar。这可能吗？这是我的尝试，这是行不通的：

html：

<div class="header">
    <a href= "#"> Left Side Text </a>
    <p class = "header title">Title Text</p>
</div>

CSS：

.header {
    height: auto;
    line-height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    font-size: 12px;
    text-align: left;
    padding-left: 50px;
}

.header .title {
    font-size: 18px;
    text-align: center;
}

小提琴：http：//jsfiddle.net/qf3w7/

Answer 1

这是您的jsfiddle

您只需要一个标题：

.header {
    height: auto;
    line-height: 50px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    top: 0;
    font-size: 12px;
    text-align: center;
    position: absolute;
}

和左链接：

.header a{
    float: left;
    z-index: 1;
}

更新：实际上您需要位置：绝对可以在中心设置标题

Answer 2

您也可以将它们设置为内联块而不是浮子。

在DOM中彼此相邻的两个块元素将与彼此相邻的两个单词相同。这具有将包含元素的高度扩展到儿童高度的额外好处，而不必担心清除浮子或设置溢出。一个警告是，dom元素标签必须彼此相邻，没有空间，以便它们没有间距问题

<aside>...</aside><!-- no spaces here --><article>...</article>

http://jsfiddle.net/cvjbw/

Answer 3

在您的简单情况下，我将您的标题绝对放置在标题内，并确保您的链接与z-index保持在顶部。

html：

<div class="header">
    <a href="#" class="link">
        <i class="fa fa-angle-left icon-white arrow"></i> 
        Left Side Text
    </a>
    <div class="title">Title Text</div>
</div>

CSS：

.link {
    position: relative;
    z-index: 1; /* Important, otherwise your link wouldn't be clickable. */
}
.title {
    font-size: 18px;
    text-align: center;
    border: 1px solid green;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

jsfiddle在这里。

，但请注意，如果您的标题或左侧文本会变太长，它们会互相重叠。

Answer 4

假设您正在尝试执行类似于移动导航的事情，请尝试将链接定位在绝对0上方和左上，而您的标题绝对顶部0和右和左和左等相等值大于背面链接的宽度。

<div class="header">
   <a class="back-link" href= "#"><i class="fa fa-angle-left icon-white arrow"></i> Left Side Text </a>
   <p class = "header title">Title Text</p>
</div>
.header .title {
    text-align:center;
    position:absolute;
    left:200px;
    right:200px;
    margin:0;
 }
.back-link{
      position:absolute;
      left:0;
 }

您可以看一下小提琴：http：//jsfiddle.net/p2n4g/

Answer 5

看这个小提琴：http：//jsfiddle.net/mlp82/

<div class="header">
<div class="titleContainer">TitleText</div>
<div class="linkContainer">Link</div>
</div> 

和CSS

.header {
height: auto;
line-height: 50px;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
font-size: 12px;
text-align: left;
padding-left: 50px;
}
.titleContainer {
text-align: center;
width: 100%;
font-size: 24px;    
position: absolute;
border: 1px solid red;
}
.linkContainer {
position: relative;
left: 10px;
top: 10px;
border: 1px solid green;
width: 50px;
height: 20px;
line-height: 20px;
padding: 0;
}

我更改了您的代码希望这对您有帮助！