Question

我正在尝试调整段落并调整圆半径..任何人都可以看一下吗？

#circle{
 background:#aaa;
 height:300px;
 width:300px;
  border-radius:50%;
 text-align:center;
  /*line-height:300px;*/

}

<body>
  <div class="container">
      <div id="circle">
    <span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div>
  </div>
</body>

Answer 1

您可以使用flexbox将副本居中放置在圆圈中，并使用一些填充以希望包含它。请注意，您必须使用flexbox的浏览器前缀，具体取决于您需要支持的浏览器（更多信息：http://caniuse.com/#feat=flexbox）

＆＃13;

*, *:before, *:after {
    box-sizing:border-box;
}
#circle {
	background: #aaa;
	border-radius: 50%;
	text-align:center;
	height:300px;
	width:300px;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:20px;
}

＆＃13;

<div class="container">
    <div id="circle">
        <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</p>
    </div>
</div>

＆＃13;

Answer 2

我认为你不能仅仅通过css

来依赖p的宽度和高度

从源代码检查，你会看到你的div是方形或矩形它永远不会是圆形它只显示为半径的圆形原因

HTML

 <div class="container">
      <div id="circle">
    <span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div>
  </div>

CSS

        #circle{
 background:#aaa;
 height:auto;
 width:30vw;
  border-radius:100%;
 text-align:center;
}
p{
   height:auto;
 width:30vw;
  border-radius:100%;
 text-align:center;
  background:red;

}

Answer 3

更新：使用CSS转换属性，您可以使用相对大小的对象更准确地进行中心定位。

当然，无论内容如何，您都可以使用一些javascript来获取段落的高度并准确定位。

我确实删除了跨度和div，没有看到它们的需要。

＆＃13;

.container{
  background:#aaa;
 height:300px;
 width:300px;
  border-radius:50%;
 text-align:center;
 vertical-align: middle;
 position: relative;
 display: block;
}

.container p {
 position: absolute;
  
 top: 47%; 
  
  /* used 47% rather than 50% 
  becuase items tend to "sink" visually, 
  so placing it slightly higher is a good thing. */
  
transform: translateY(-50%); 

}

＆＃13;

<body>
  <div class="container">
    <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p>      </div>
</body>

＆＃13;

如何调整圆半径以适合其中的段落

3 个答案: