Question

我有一个固定大小的div与背景图像，我希望文本直接在中间对齐。垂直和水平。

我能够获得水平对齐，但在我的生命中不能让它垂直对齐。我在这里看到了答案，但找不到任何适用于固定大小div的东西。

您可以看到跨度周围的蓝色边框。如果我可以将其向下移动以始终以任何文本为中心（只要它不会变得太大）我会在那里。

div {
    background-image: url(http://i.imgur.com/I86rTVl.jpg);
    width: 500px;
    height: 300px;
    border: 1px solid red;
    
}

span {
    position: absolute;
    text-align: center;
    width: 500px;
    border: 1px solid blue;
    font-size: 72px
}

<body>
	<div>
		<span>Testing for fiddle</span>
	</div>
</body>

Answer 1

在许多可能的解决方案中，这是一种现代flexbox技术。

检查Flexbox

的浏览器兼容性表

div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; /* Center vertically */
  background-image: url("http://i.imgur.com/I86rTVl.jpg");
  border: 1px solid red;
  height: 300px;
  width: 500px;
}
span {
  /* position: absolute; Remove */
  white-space: nowrap; /* Avoid text wrapping */
  text-align: center;
  width: 500px;
  border: 1px solid blue;
  font-size: 72px
}

<body>
  <div>
    <span>Testing for fiddle</span>
  </div>
</body>

Answer 2

尝试好的旧表/表格单元技术。适用于IE9：）

<body>
	<div>
		<span>Testing for fiddle</span>
	</div>
</body>

create table events(
  event_type integer not null,
  value integer not null,
  time timestamp not null,
  unique (event_type ,time)
  );

Answer 3

绝对定位

将父级设置为position:relative将孩子的位置设置为顶部：50％并将其翻译为自己高度的一半。

＆＃13;

div {
  background-image: url(http://i.imgur.com/I86rTVl.jpg);
  width: 500px;
  height: 300px;
  border: 1px solid red;
  position: relative;
}
span {
  position: absolute;
  text-align: center;
  width: 500px;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  border: 1px solid blue;
  font-size: 72px
}

＆＃13;

<body>
  <div>
    <span>Testing for fiddle</span>
  </div>
</body>

＆＃13;

Answer 4

https://jsfiddle.net/kvqLnchw/1/

  div {
    background: url(http://i.imgur.com/I86rTVl.jpg) no-repeat;
    width:500px;
    height: 300px;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}

span {

    border: 1px solid blue;
    font-size: 72px

}

在一个固定大小的div中间对齐span

4 个答案: