相关疑难解决方法(0)

居中对齐div中的"span"文本

我有一个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.

有没有其他方法来解决这个问题?

html css

26
推荐指数
1
解决办法
16万
查看次数

在div中垂直居中两个元素

我试图垂直居中两个<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)

html css css3 centering flexbox

12
推荐指数
2
解决办法
5万
查看次数

标签 统计

css ×2

html ×2

centering ×1

css3 ×1

flexbox ×1