Question

感谢您抽出宝贵时间回答我的问题。我知道，这个问题之前已经被问过并得到了解答，但不知怎的，我不能让它看起来像预期的那样。我将在下面向您展示我尝试过的一些事情。

我有一个带有圆形边框的div，我想显示一个标题（标准字幕之一）。

这就是我所拥有的：

HTML：

<div id="selectModel" class="admin_dropdown">
   <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
   [...]
</div>

CSS：

h5.admin_caption {

        width: 300px;
        margin-top: -20px;
        margin-left: auto;
        margin-right: auto;
        background: white;

    }

我不允许发布图片（＆lt; 10 rep），所以我希望jsfiddle工作。）

它的样子：http://jsfiddle.net/vrP39/

我希望它看起来像：http://jsfiddle.net/vrP39/1/

正如您所看到的，最后一个小提琴的结果是通过更改width直到它与标题匹配来实现的。当然我想用几个不同长度的标题来使用它，所以这不是一个选项。

到目前为止我尝试了什么：

在我的标题文字周围使用<span>，同时设置<span>元素的样式而不是<h5>
display: inline-block或display: inline
float: left位于以下元素中的<h5>和clear:left

我在stackoverflow（Width of Headers (H1, H2 etc)）上看到了这篇文章（其中包括），但我尝试过的任何内容似乎都无效。

我做错了什么？非常感谢任何帮助，提前谢谢！

Answer 1

好像您正在尝试重现<fieldset>元素。那么为什么不使用那个元素？

<form>
    <fieldset>
        <legend>Wählen sie das anzuzeigende Model</legend>
        <select id="selectModelDDL" onchange="createTable(this);">
            <option value="1">1</option>
        </select>
    </fieldset>
</form>

使用<fieldset>，您将在<legend>是边框上的文字的元素周围创建边框。
现在您可以将文本与中心对齐：

fieldset
{
    text-align: center;
    border: 1px solid black;
    border-radius: 15px;
    font-weight: bold;
    font-size: 13px;
    padding: 10px;
}

jsFiddle

Answer 2

使用您当前的代码，您可以执行此操作：http://jsfiddle.net/vrP39/6/

在<span>（背景色）

中添加h5

<h5 class="admin_caption"><span>Wählen sie das anzuzeigende Model</span></h5>

对于CSS

h5.admin_caption { text-align:center; margin-top: -20px; }
h5.admin_caption span { display:inline-block; background:#fff; padding:0 5px;}

第一位使文本居中，然后我们必须在背景中添加隐藏黑色边框线。

span需要设置为inline-block，因此我们可以在左侧和右侧添加一些填充，因为如果span>元素是display:inline元素，则无法执行此操作使用默认的{{1}}属性。

Answer 3

您也可以尝试将标题包装在div中：

HTML：

<div class="container">
    <div id="selectModel" class="admin_dropdown">
        <div class="caption_wrapper">
             <h5 class="admin_caption">Wählen sie das anzuzeigende Model</h5>
        </div>
        <select id="selectModelDDL" onchange="createTable(this);"></select>
    </div>

CSS：

div.caption_wrapper {
    margin: 0 auto;
    text-align: center;
    height: 1px;
}
h5.admin_caption {
    background: #FFF;
    display: inline-block;
    position: relative;
    top: -20px;
    margin: 0;
}

<强> http://jsfiddle.net/vrP39/9/

Answer 4

这是你要找的吗？ http://jsfiddle.net/fatgamer85/33c4N/

 max-width: 30px;
 overflow: hidden;

我已经给出了最大宽度并隐藏了溢出以获得所需的效果。

如何按内容长度</h5>限制<h1> - </h1> <h5>标签的宽度

4 个答案:

jsFiddle