Question

我有这个div（一个红色圆圈）：

是用这个CSS制作的：

.marker-cluster-div {
width: 30px;
height: 30px;
font-size: 12px;
border-radius: 50%;
color: black;
font-weight: bold;
text-align: center;
vertical-align: middle;
line-height: 30px;
}

如何使div中的文本同等地流出div的两端？我希望文本从div的左侧略微开始，如果它不适合，则稍微向右侧结束。如果文本适合，请将其放在中心。

我如何在CSS中执行此操作？

Answer 1

正如我在评论中提到的那样，你不应该将文本实际从“包含”div中流出。

我会建议这样的事情。

JSfiddle Demo

<强> HTML

<div class="circle">
    <div class="text">
        <p>Lorem ipsum dolor sit.</p>
    </div>
</div>

<强> CSS

.circle {
    margin: 50px;
    width:50px;
    height:50px;
    border-radius:50%;
    position: relative;
    background: red;
}

.circle .text {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:auto;   
    white-space:nowrap;
}

或..更好 - JSfiddle Demo (Pseudo-element)

<强> HTML

<div class="circle">
    <p>Lorem ipsum dolor sit.</p>
</div>

<强> CSS

.circle {
    position: relative;
    display: inline-block;
}

.circle:after {
    content:"";
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:auto;
    width:50px;
    height:50px;
    border-radius:50%;
    background: red;
    z-index:-1;
}

Answer 2

这个怎么样：

＆＃13;

#circle {
    float: left;
    height: 120px;
    line-height: 120px;
    white-space: nowrap;
    background: url('https://www.dropbox.com/s/g5sit7vueru0cd1/circle.svg?raw=1') no-repeat center center; 
}

＆＃13;

<div id="circle">
    Lorem ipsum dolor sit.
</div>

＆＃13;

另一个包含多个元素的示例：

＆＃13;

.circle {
    float: left;
    clear: both;
    height: 120px;
    line-height: 120px;
    white-space: nowrap;
    background: url('https://www.dropbox.com/s/g5sit7vueru0cd1/circle.svg?raw=1') no-repeat center center; 
}

＆＃13;

<div class="circle">
  Lorem ipsum dolor sit.
</div>

<div class="circle">
  Lorem ipsum.
</div>

<div class="circle">
  Lorem ipsum dolor sit amet, consectetur.
</div>

＆＃13;

Answer 3

试试这个：

你的CSS

div.content
{
margin-left:300px; /*just for making div visible for you, you can delete that in your code*/
width: 100px;
height: 100px;
font-size: 12px;
border-radius: 50%;
background-color: red;
font-weight: bold; 
text-align:center;
}

p.centerText
{
  float:left;
  width:400px; /* you must know your text's width for this code to work */
  margin-top:50px; /* div.content's height/2 */
  background-color:yellow;
  margin-left:-150px  /* (p.centerText's width/2)-(div.content's width/2) */
}

Your HTML

<html>
<body>  
  <div class="content">    
    <p class="centerText">
     lorem ipsum  lorem ipsum  lorem ipsum  lorem ipsum          
    </p>
  </div>  
</body>
</html>

Answer 4

http://codepen.io/straight-shoota/pen/ophHF?editors=110

<强> CSS

.marker-cluster-div {
  width: 45px;
  margin-left: -7px;
  color: black;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  text-align: center;
  position: relative;
  font-size: 12px;
}
.marker-cluster-div::before {
  content: "";
  left: 7px;
  display: block;
  position: absolute;
  z-index: -1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
}

另一种解决方案是将红点作为背景图像。

CSS - 如何使文本溢出div的两端？

4 个答案: