相关疑难解决方法(0)

我有一个包含文本的div元素,我想将此div的内容垂直居中对齐.

这是我的div风格:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

<div id="box">
  Lorem ipsum dolor sit
</div>

做这个的最好方式是什么？

我div有一套display:block.(90px height和width)我里面有一些文字.

我需要文本在垂直和水平方向上对齐.

我试过了text-align:center,但它不做水平部分,所以我试过vertical-align:middle但它没有用.

有任何想法吗？

下面的代码(也可以作为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;        
}

我试图让我的文本垂直对齐到abc div的div中间.

我想保持高度为50px,文本在div的中间垂直对齐.

我还没有找到解决这个问题的方法,也许我找不到合适的东西.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

首先,我道歉.我知道这里有针对这个问题的各种解决方案,但对于我的生活,我无法让他们中的任何一个工作.

对于一个响应式网站,我试图将一个h1集中在一个div中.

水平居中不是问题,但我在垂直居中时遇到了问题.据推测,我做错了什么或误解了我在这里找到的解释(或两者兼而有之).

因为我可能会以错误的方式解释早期的解决方案,有人可以解释一下我必须添加到下面的代码中以使h1垂直居中吗？

(为了使这个问题与尽可能多的人相关,我已经删除了我以前所有尝试这样做的代码.)

CSS:

html, body {
height: 100%;
margin: 0;
}

#section1 {
min-height: 90%; 
text-align:center
}

HTML:

<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div> 

我有以下css代码:

.readMore:before {
    content: '';
    display: block;
    float: left;
    width: 10px;
    height: 27px;
    margin: 0;
    background: red url('images/button.png');
    background-position: 0 0;
}

.readMore {
    float: left;
    height: 24px;
    background: url('images/button.png');
    background-position: -10px 0;
    border: 0;
    margin: 0;
    padding: 4px 0 0 0;
    cursor: pointer: 
}

.readMore:after {
    content: '';
    display: block;
    float: right;
    width: 10px;
    height: 27px;
    margin: 0;
    top: -3px;
    background: red url('images/button.png');
    background-position: -411px 0;
}

哪个样式的链接看起来像这样:

但是当试图在垂直方向上调整.readMore中的文本时:before和:after图像也会"跳跃"下来.这是合乎逻辑的,但有没有解决方案,以便更好地与"总图像"对齐？

我知道这个问题已被要求死亡,但通过搜索没有任何东西对我有用.

你知道这个交易,我有一个div元素,我需要垂直对齐文本,但没有任何工作(位置:绝对;顶部:50%; margin-top:-x;显示:table-cell; vertical-align:middle等等)

这是我正在使用的内容(抱歉内联CSS).无论如何,我会使用行高,但文本可以是一行或两行.它应与图像垂直对齐,图像总是最大高度为30px(30x50).

 <div style="margin:0 0 10px 0;padding:10px;border:2px solid #606060;background-color:#2b2b2b;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">
 <div style="float:left;width:55px;height:40px;">
 <a href="link"><img style="max-width:50px;border:1px solid #ffb92c;" src="image.jpg" alt="" /></a>
 </div>
 <div style="float:right;width:155px;font-size:0.7em;height:40px;">
 <a href="link">This is the text to vertically align</a>
 </div>
 </div>

我有一个img浮动div,我不知道如何垂直居中.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align:中间当然不起作用.

http://jsfiddle.net/wKQYj/

挫折

我不得不一次又一次地在互联网上搜索以找到一种方法来让一个简单的网页填满任何设备上的整个屏幕，这让我感到沮丧。我不关心分辨率、文本大小、文本是否出现在屏幕内或其他任何东西。我什么都不关心。我要显示一个单词，它应该位于屏幕中间，垂直和水平。

CSS 快把我逼疯了。我不明白为什么这不简单。和引导程序。嗯，非常感谢你们帮了我很多！但是为什么不创建一个能够占据屏幕上所有可见空间的类呢？

我尝试了很多变体，但没有一个有效。我就是无法将这个词传达到屏幕中央。

一些变化

最简单的一个： http: //jsfiddle.net/IcyFlame/ngVSd/

<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>

我不知道为什么这不起作用。我想知道为什么这行不通。更重要的是，如果你能告诉我如何让它发挥作用，我真的很喜欢。无时无刻、无处不在。

这是一个非常有用的问题：Setting height: 100% on my label element does not work

给出答案的人说是100%的。真的很酷。以及如何解决整体问题？哦不，我刚刚回答了问题。

此后的所有问题均已标记为重复。其中之一是：

身高：100%不行！为什么？

尽管问题完全不同，但主持人只是认为这是重复的，并将其标记为重复。

注意：我正在适应很多屏幕尺寸。我不想在最终代码中的任何地方编写任何类型的绝对像素高度和宽度。

请帮我解决这个问题

参考：我希望这个词位于中间，就像在这个 gorgeours 网站上一样：

http://debarghyadas.com/

请注意，这只是一个参考。我不想有背景图片。网页的整个标题部分占据整个屏幕，这就是我想要实现的目标。

一切都集中而美丽。那就是我想去的地方。

我正在使用引导程序的表格列的CSS格式遇到一些麻烦.正常td看起来像这样:

<td style="vertical-align: middle; font-size: 10px;">
<span class="edit-icon glyphicon glyphicon-pencil" style="vertical-align: top !important;"></span>
Content
</td>

随着edit-icon类看起来像:

.edit-icon {
    float: right;
    padding-top: 3px;
    padding-right: 3px;
}

理想情况下,单元格中的内容应垂直居中,图标应位于右上角.我已经尝试了几个小时,但无济于事,弄清楚如何将一个元素垂直对齐到中间,一个元素在同一个单元格中垂直对齐.

为了帮助进一步显示问题,这是当前的外观:

这是我正在寻找的:

任何有关如何解决这个CSS难题的帮助将不胜感激!