1

我有一个 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 只是为了模拟我的要求

4

5 回答 5

1

只需调整一些 CSS

请参阅演示小提琴。

.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到.message中心，然后将其重置为在左侧有自己的text-align背面（这不是必需的）。要a在同一行上，p还需要某种类型的内联显示，这里我也选择了inline-block..

于 2013-06-18T18:40:29.533 回答
1

我认为你把事情复杂化了。您所需要的只是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 充当文本内的单词，而 text-align center 使“单词”与中心对齐...

于 2013-06-18T18:51:06.127 回答
0

看一下这个：

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

对以上链接所做的更改

.container .message {
    margin: 0 auto;
    width:auto;   
}
span{
    background: #ddd;
    display:inline;
}
于 2013-06-18T18:30:06.397 回答
0

这是给出的几个答案的简化方法。它减少了所需的 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>。

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

于 2013-06-18T19:33:48.617 回答
0

您可以使用display: table;和简化它margin: 0 auto;

.container {
  display: table;
  margin: 0 auto;
  background-color: #DDD;
}
<div class="container">
  do you want to <a href="somewhere" target="_blank">buy this product</a>
</div>

于 2021-10-09T23:00:18.250 回答