I have this div :
我有这个div:
<div id="ShowCase" style="background-color: black; position: absolute; height: 100%; width: 100%; top: 0px; left: 0px; opacity: 0.5; color: white;">
<h2 >شما با این گزینه می توانید</h2>
</div>
want to show h2 tag into ShowCase div center,but I am getting this output:
想要将h2标记显示在展示div中心中,但是我得到了这个输出:
How can I solve this?
我怎么解决这个问题呢?
3 个解决方案
#1
1
If you're talking just horizontally aligning the text; just add
如果只是水平对齐文字;只需添加
#ShowCase {
text-align: center;
}
If you're talking vertical aligned, then you can use flexbox
or display:table
. I've written out the display:table
method as it is has more browser compatibility.
如果你说的是垂直对齐,那么你可以使用flexbox或display:table。我已经写了显示:表方法,因为它有更多的浏览器兼容性。
body {
background-color: #555;
}
#ShowCase {
background-color: black;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
opacity: 0.5;
color: white;
/* Horizonatally Centers Text -- */
text-align: center;
/* Needed in order to Vertically Center Text --*/
display: table;
}
/* Vertically Aligns Text -- */
#ShowCase h2 {
display: table-cell;
vertical-align: middle;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>
#2
2
use text-align:center in h2 tag
使用文本对齐:中心在h2标签。
h2{
text-align:center;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>
If you want to set it as center vertically also then try in this way--
如果你想把它垂直放置,也可以这样试试。
#ShowCase
{
width: 400px;
height: 200px;
display: table;
background:blue;
}
h2{
text-align: center;
display: table-cell;
vertical-align: middle;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>
#3
0
you can adjust it with text-align or with margin,but I would recommend you to go with text-align
你可以用文本对齐或边缘调整,但我建议你使用文本对齐方式。
Here I have removed your display:none and used text-algin:center
这里我删除了你的显示器:没有,并使用了文本-algin:center。
#ShowCase{
background-color: black;
position: absolute;
height: 100%; width: 100%;
top: 0px;
left: 0px;
opacity: 1;
color: white;
}
h2{
text-align:center;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>
#1
1
If you're talking just horizontally aligning the text; just add
如果只是水平对齐文字;只需添加
#ShowCase {
text-align: center;
}
If you're talking vertical aligned, then you can use flexbox
or display:table
. I've written out the display:table
method as it is has more browser compatibility.
如果你说的是垂直对齐,那么你可以使用flexbox或display:table。我已经写了显示:表方法,因为它有更多的浏览器兼容性。
body {
background-color: #555;
}
#ShowCase {
background-color: black;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
opacity: 0.5;
color: white;
/* Horizonatally Centers Text -- */
text-align: center;
/* Needed in order to Vertically Center Text --*/
display: table;
}
/* Vertically Aligns Text -- */
#ShowCase h2 {
display: table-cell;
vertical-align: middle;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>
#2
2
use text-align:center in h2 tag
使用文本对齐:中心在h2标签。
h2{
text-align:center;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>
If you want to set it as center vertically also then try in this way--
如果你想把它垂直放置,也可以这样试试。
#ShowCase
{
width: 400px;
height: 200px;
display: table;
background:blue;
}
h2{
text-align: center;
display: table-cell;
vertical-align: middle;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>
#3
0
you can adjust it with text-align or with margin,but I would recommend you to go with text-align
你可以用文本对齐或边缘调整,但我建议你使用文本对齐方式。
Here I have removed your display:none and used text-algin:center
这里我删除了你的显示器:没有,并使用了文本-algin:center。
#ShowCase{
background-color: black;
position: absolute;
height: 100%; width: 100%;
top: 0px;
left: 0px;
opacity: 1;
color: white;
}
h2{
text-align:center;
}
<div id="ShowCase">
<h2>شما با این گزینه می توانید</h2>
</div>