[英]How do I vertically align this text in the center of the row?
The children are just <p>X</p>
.孩子们只是
<p>X</p>
。
I tried with justify-content-center
, align-items-center
, text-center
but it doesn't work.我试过
justify-content-center
, align-items-center
, text-center
但它不起作用。
I want the text to be in the center of the square vertically and horizontally我希望文本垂直和水平位于正方形的中心
HTML HTML
<div className="d-flex flex-row justify-content-center boardRow">
{[...Array(3).keys()].map((col, index_col) => (
<div
className="d-flex flex-column d-flex justify-content-center align-items-center element innerBoard bg-danger">
{children[row * 3 + col]}
</div>
))}
</div>
The css: ZC7A628CBA22E28EB17B5F5C6AE2A266AZ:
.boardBox {
.element {
border: 1px solid black;
}
.boardRow:first-child .element {
border-top: none;
}
.boardRow:last-child .element {
border-bottom: none;
}
.boardRow .element:first-child {
border-left: none;
}
.boardRow .element:last-child {
border-right: none;
}
}
.innerBoard {
width: 20px;
height: 20px;
}
Based on my comment above, the correct answer in case others face the same issue would be to take care of the margin
that usually comes by default for most browsers for the p
tags.根据我上面的评论,如果其他人面临同样的问题,正确的答案是处理大多数浏览器默认的
p
标签页margin
。 Remove the p
margin and everything should work ok.删除
p
边距,一切都应该正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.