[英]Can align text to center at flex display
What my problem is, that i cant align the text to center horizontally. 我的问题是,我无法将文本水平对齐。 Vertically, i aligned it the center, but horizontally, i cant.
在垂直方向上,我将其居中对齐,但在水平方向上,我不能。 (When the text is longer, its centered horizontally?! If i see it right.)
(当文本较长时,其水平居中吗?!如果我看对了。)
I tryed adding the <a>
element display:block
and text-align:center
, but it didnt solved my problem. 我尝试添加
<a>
元素display:block
和text-align:center
,但没有解决我的问题。
I attach a photo of the site. 我附上该网站的照片。 Photo-Click here
图片点击这里
The <a>
element is in a <h2>
element. <a>
元素位于<h2>
元素中。
<h2>
css: <h2>
CSS:
line-height: 22px;
margin-top: 10px;
margin-bottom: 5px;
font-size: 16px;
height: 55px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;
The <a>
-element css: <a>
元素css:
color: #333;
-webkit-transition: color .5s;
-moz-transition: color .5s;
-ms-transition: color .5s;
-o-transition: color .5s;
transition: color .5s;
What am i doing wrong? 我究竟做错了什么?
Without seeing your code in context with the rest of the html and css, I would put justify-content: center ;
如果没有在HTML和CSS其余部分的上下文中看到您的代码,我会把
justify-content: center ;
on the parent element ie the h2. 在父元素即h2上。 I am assuming this is set to be 100% of width to match the width of the image.
我假设将其设置为宽度的100%以匹配图像的宽度。
Check this out for full info on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 签出有关flex的完整信息: https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
display: flex
defines an element as a flex container and enables flex properties on all of its direct children. display: flex
将元素定义为flex容器,并在其所有直接子元素上启用flex属性。 Instead of applying flex to <h2>
, you need to apply it to the parent container for it to work. 无需将flex应用于
<h2>
,您需要将其应用于父容器以使其起作用。
.container { width: 200px; height: 150px; display: flex; justify-content: center; align-items: center; border: 1px solid black; }
<div class='container'> <h2> <a>Game Title</a> </h2> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.