我有一个HTML代码;
<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>
Run Code Online (Sandbox Code Playgroud)
我的CSS如下;
.left {
background-color: #999999;
height: 50px;
width: 24.5%;
}
span.panelTitleTxt {
display: block;
width: 100%;
height: 100%;
}
Run Code Online (Sandbox Code Playgroud)
现在我如何将div中的span文本居中对齐?(假设%转换后的"left"div的px宽度为100px)
我尝试了标准的使用方式margin:auto,但这不起作用.
我也想避免使用text-align:center.
有没有其他方法来解决这个问题?
我试图垂直居中两个<p>元素.
我按照phrogz.net上的教程进行了操作,但仍然将元素放在div上方,在div下面,在div中顶部对齐.
我会尝试其他的东西,但这里的大多数问题只是回到那个教程.
此代码段用于网页顶部的横幅广告.
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}Run Code Online (Sandbox Code Playgroud)
<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p> …Run Code Online (Sandbox Code Playgroud)