Question

我试图制作一个标题栏，旁边有一个很好的居中标题和一个工具栏。我遇到的问题是随着工具栏的增长，标题越来越偏离中心（并且从未真正开始居中）。我已经对此进行了一段时间的讨论，尝试了一些搜索，但似乎无法找到答案。那些有更多css经验的人可以给我一块骨头吗？

HTML

<div>
    <span>
        Section Title
    </span>
    <div class="toolbar">
        <button>Add</button>
        <button>Remove</button>
</div>

CSS

div { background:red;overflow:hidden;  text-align: center; }

span a {
    background:#222;
    color:#fff;
    display:inline-block;

    margin:10px 10px 0 0;
    padding:5px 10px
}

.toolbar {
    float: right;
}

这是一个小提琴： http://jsfiddle.net/scottvossen/cePe3/124/

Answer 1

您可以将position: relative添加到包含div的内容中。然后将工具栏绝对定位在角落里。

div{
  position: relative
}

.toolbar{
  position: absolute;
  top: 0;
  right: 0;
}

<强> FIDDLE

Answer 2

您希望在外部div上使用position: relative，在内部div上使用position: absolute。您可以详细了解如何定位div here。

FIDDLE。我也将文本垂直居中。

HTML

<div id="background">
    <div id="centeroutline">
        <div id="centertext">
        Section Title
        </div>
    </div>
    <div class="toolbar">
        <div id="buttons">        
            <button>Add</button>
            <button>Remove</button>
        </div>
    </div>
</div>

CSS

#background { 
    position:relative;
    background:red;
    overflow:hidden;  
    text-align: center; 
    height:26px;
    width:auto;
}

#buttons{
    position:relative;
}

#centeroutline {
    color:#fff;
    display: table;
    width:100%;
}

#centertext{
    margin:10px 10px 0 0;
    padding:5px 10px;
    display: table-cell; 
    vertical-align: middle;
    width:100%;
    text-align:center;
}

.toolbar {
    right:0;
    top:0;
    position:absolute;
}

在工具栏旁边居中标题

2 个答案: