圆div中的文本溢出

Question

我有一个圆圈div，我的文字不在里面。默认情况下略高于此，我无法确定原因。我已经在顶部添加了边距以强制它在div中，但我确信有更好的方法来执行此操作，因为我的方法仅适用于一定量的文本。

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}

<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, 
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra 
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget 
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo 
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, 
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, 
a ornare ex blandit a.
</p>
</div>

这就是它的样子

但我希望它看起来更像这样，但不必在div内部的文本顶部添加边距。

Answer 1

这是一个允许内部任何大小的文本的版本，当然，如果内容的大小非常大，则必须更改周围<div>的大小。我添加了第二个示例，其中包含更多文本。

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: justify;
  text-align-last: center;
  position: relative;
}
div.description h1 {
  margin: 0;
  padding: 0;
}
div.description p {
  padding: 3.5em;
  position: absolute;
  top: 50%;
  max-width: 470px;
  max-height: 470px;
  transform: translate(0,-50%);
}

<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat.</p>
</div>

Answer 2

您应该使用css3 flexbox。以下css将使元素水平和垂直中间对齐：

div.description {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

＆＃13;

＆＃13;

div.description {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  margin-top: 250px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: #caebf2;
  white-space: pre-line;
  text-align: center;
  padding: 25px;
}

＆＃13;

<div class="description">
  <h1>Title</h1>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, 
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra 
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget 
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo 
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, 
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, 
a ornare ex blandit a.
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

对于旧的浏览器支持，您可以使用以下css使其中间对齐：

div.description {
  display: table;
}
div.description div.text {
  vertical-align: middle;
  display: table-cell;
}

＆＃13;

＆＃13;

div.description {
  display: table;
  position: relative;
  margin-top: 250px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: #caebf2;
  white-space: pre-line;
  text-align: center;
  padding: 25px;
}
div.description div.text {
  vertical-align: middle;
  display: table-cell;
}

＆＃13;

<div class="description">
  <div class="text">
    <h1>Title</h1>
    <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, 
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra 
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget 
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo 
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, 
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, 
a ornare ex blandit a.
    </p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以试试这个。给max-width p元素小于圆圈，这样它就不会超出圆圈。

＆＃13;

＆＃13;

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
div.description p{
  max-width: 450px;
  margin: 0 auto;
}

＆＃13;

<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.
</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用padding:20px;的概念来实现您期望的输出

＆＃13;

＆＃13;

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
padding: 20px;  
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}

＆＃13;

<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, 
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra 
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget 
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo 
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, 
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, 
a ornare ex blandit a.
</p>
</div>

＆＃13;

＆＃13;

＆＃13;