相关疑难解决方法(0)

如何使用CSS <div>在另一个内部水平居中<div>？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

我试图找到最有效的方法来将文本与div对齐.我尝试了一些东西,似乎都没有用.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse …

下面的代码(也可以作为JS Fiddle的演示版)不会将文本放在中间,正如我理想的那样.div即使使用margin-top属性,我也找不到任何方法将文本垂直居中.我怎样才能做到这一点？

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>

#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

<div>在页面上垂直和水平居中元素的最佳方法是什么？

我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么？

我有一个200 x 200像素的div.我想在div的中间放置一个50 x 50像素的图像.

怎么做到呢？

我可以通过使用text-align: centerdiv 来使它水平居中.但垂直对齐是个问题..

我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.

如何为每个标签创建文本对齐x和y？

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

每当鼠标悬停在只有CSS的图像上时,我就会尝试为图像添加透明的黑色叠加层.这可能吗？我试过这个:

http://jsfiddle.net/Zf5am/565/

但我无法让div出现.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

我有一个div 30px高和500px宽.这div可以包含两行文本,一行在另一行之下,并相应地设置样式(填充).但有时它只包含一行,我希望它居中.这可能吗？

免责声明:我不相信这是重复的,因为我使用相对大小来生成全屏网格布局而不使用px.

问题:在这个jsFiddle http://jsfiddle.net/X3ZDy/73/我有四个相同比例的盒子.它们的设计跨越屏幕宽度并保持正方形.其中包含一些样本方形DIV(40%x 40%).我正在努力让文本标签lbl水平和垂直居中bbl.

我见过(并尝试过)的所有例子都不起作用,因为它们要求我知道标签的高度,或者他们使用浏览器限制的table-layout技巧.我需要按照小提琴的所有相对尺寸来做这个.

有人可以帮忙吗？我需要使用纯CSS(无JS)解决方案来处理所有浏览器.令我感到惊讶的是,在div中垂直对齐文本似乎非常棘手.我不介意我们使用块或内联元素作为文本标签.

请注意,我不是在寻找一个TABLE解决方案,这是一个DIV和CSS拼图,需要一个有效的jsFiddle.

更多: 感谢所有人的答案,但是对于未来的海报,请注意(width == padding-bottom)是允许我的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;
}

<div class="banner">
  <div class="bannerleft">
    I am vertically centered
  </div>
  <div class="bannerright">
    <div class="bannerrightinner">
      <p>I should be</p> …