Question

div {background-color:green;
			height:500px;
			width:500px;
			margin:auto;
			border-radius:50%;
			overflow:hidden;
			padding:300px;
			border: 4px solid red;
			box-sizing:border-box;

			}

<div><p>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text .</p> </div>

您好，我想知道如何使此文本垂直显示并且不离开div？我已经尝试过进行垂直对齐，但是由于某些原因它无法正常工作。cs

Answer 1

您可以使用flexbox轻松实现这一目标。

div {
  background-color: green;
  height: 500px;
  width: 500px;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid red;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div><p>This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text . This is text .</p> </div>

Answer 2

您是否将CSS设置box-sizing设置为border-box？如果是这样，这就是原因。您的填充太大，因此宽度和高度很小。您可以减少填充，或将CSS设置box-sizing设置为content-box，尤其是对于此元素。

为什么我的文字垂直而不是水平？

2 个答案: