Question

我有一条div消息，基本上有一个文本和一个链接。我希望它的大小根据其中的字符串而改变。此外，我希望此消息div在其容器内居中。

我已经玩了一段时间而没有太多运气。以下是JSfiddle的链接：http://jsfiddle.net/pDYJ8/

此外，我不知道如何使该文本和链接一个接一个地显示（不在新行上）

以下是代码：

<div class="container">
<div class="message">
    <p>do you want to </p> 
    <a href="somewhere" target="_blank">
        buy this product
    </a>
</div>
</div>

.container {
    position: absolute;
    background: #666;
    top:25%;
    width:100%;
    font-size: 15px;
    color: #e47911;
}
.message {
    margin-right: auto;
    margin-left: auto;
    background: #ddd;


    width:100px;   
}

尝试显示内嵌块以适应其内容，但之后不会将其置于其父级中。

保持宽度100px现在只是为了模拟我的要求

Answer 1

只需调整一些CSS

See the demo fiddle.

.container {
    position: absolute;
    background: #666;
    top:25%;
    width:100%;
    font-size: 15px;
    color: #e47911;
    text-align: center; /*added*/
}
.container .message {
    display: inline-block; /*added*/
    text-align: left; /*added*/
    background: #ddd;
}

.message p { /*added*/
    display: inline-block;
}

<强>解释

text-align中心导致inline-block的{{1}}显示为中心，然后重置为左侧有.message（这不是必需的）。要在同一行显示text-align，a也需要某种类型的内联显示，此处我也选择了p。

Answer 2

我认为你过于复杂化了。您只需要容器上的text-align: center和邮件上的display: inline-block：

.container {
    background: #666;
    font-size: 15px;
    color: #e47911;
    text-align: center;
}
.container .message {
    background: #ddd;
    display: inline-block;
}

http://jsfiddle.net/Pevara/pDYJ8/9/

内联块使div作为文本中的单词，文本对齐中心使“单词”与中心对齐...

Answer 3

检查出来：

http://jsfiddle.net/pDYJ8/10/

对上述链接所做的更改

.container .message {
    margin: 0 auto;
    width:auto;   
}
span{
    background: #ddd;
    display:inline;
}

Answer 4

这是给出几个答案的简化方法。它减少了所需的HTML和CSS数量。

<强> CSS

 .container {
      color: #e47911;
      text-align: center;
 }
 .message {
      display: inline;  
      background: #DDDDDD;
 }

<强> HTML

 <div class="container">
      <p class="message">
           Do you want to <a href="somewhere" target="_blank">buy this product</a>?
      </p>
 </div>

我肯定会将你的锚标记<a>放在段落标记<p>中。

如果您将display: inline;设为.message而不是<span>，则甚至可以从<p>删除{。}}。

根据内容创建div大小，并在其父级内部水平居中

4 个答案:

只需调整一些CSS