相关疑难解决方法(0)

我需要创建类似的东西:文本应该水平和垂直地位于正确的中间位置.我已经水平实现,但在垂直方面存在问题.因为,我的文字是动态的.有时它是两行文本,有时是四行或有时只有一行.

这是我的CSS代码:

.image-container { border:1px solid #CCC; height:300px; width:300px; position:relative; float:left; margin-left:20px; }
p {position:absolute; top:40%; text-align:center; width:100%; }

这是一个HTML:

 <div class="image-container">
<p> One line Content works perfact</p>
 </div>
 <div class="image-container">
<p> Two line Content:Lorem Ipsum is simply dummy text of the printing </p>
 </div>
 <div class="image-container">
<p> Three Line Content:Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </div>

请找到小提琴链接:http://jsfiddle.net/YK7V5/

我已经看到答案为'' 垂直对齐在一个分区 '并遵循亚当的答案.我的问题是如何将图像和文本并排,文本位于图像的中间.

我的JSFiddle

我试过的代码

CSS

.outerContainer {
    display: table;
    width: 100%; /* width of parent */
    height:200px;
    overflow: hidden;
    border:1px solid green;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
}

HTML

<div class="outerContainer">
          <div class="innerContainer">
            <div >
             <img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height=50px width=50px>
                <p style='display:inline-block;font-size:10px;'>Some Text</p>

            </div>
          </div>
        </div>

我的问题是获得"Some Text"侧和图像中间

**注意:**我知道我不应该在这里使用内联块.但我不知道如何得到它.

我试图垂直中心的孩子的绝对定位div没有运气.有人为此提供了很好的解决方案吗？(whitout js).

<div class="title">
    <div>
        <span>03</span>
    </div>
    <h2>
        title
    </h2>
</div>

CSS:

.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title div,h2 {
    //i want to center these two verical
}

重要:

我的帖子(通常)不重复.我发现这个,这个,这个和这个堆栈溢出后(也有可能所有重复).我尝试这个帖子最常见的答案,但它不起作用.我也试过其他方法,但我无法达到目标.

所以,我有一个带文字的大div:

 html, body {
    height: 100%;
}

#dimScreen {
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
}

h1 {
    font-size:350%;
}

<div id="dimScreen" style="text-align: center; vertical-align: center; display:inline-block;">
    <h1 >Big text</h1> 
</div>

我的问题是,我无法想象如何将文本放在我的灰色div的中心(垂直+水平).如您所见,文本显示在div的中心(水平),但不在垂直中心.我在身体的一部分设置了中心(垂直+水平).

在我的示例中,我尝试将文本垂直对齐所有这些帖子的最常见响应,但它不起作用.我已经尝试过其他方式,我们可以在链接的问题中找到它们,但它们不起作用:我们总是有相同的结果.

我想我有这个问题,因为我在所有页面上显示我的(灰色)div.我尝试了一个普通的div并且代码有效:我的文本是垂直居中的.

简短的问题:

如何将文本垂直居中于灰色div？

如果您有疑问,请告诉我.

斯芬克斯.

我是第一次进行chrome扩展程序，并试图将文本居中。我现在使用的text-align: centre;是水平对齐方式，但无法弄清楚如何垂直对齐，因此此刻我的文字看起来像这样：

如果有人可以帮助，那就太好了。

如何在矩形中间对齐这个内容词。“测试”一词在顶部。我使用了所有东西， text-align:center; Vertical-align:middle, justify-content:center, align-items: center, 还是不行

.rectangle {
  height: 75px;
  width: 75px;
  color:white;
  background-color: rgb(77,77,77);
  border-radius:7px;
  text-align:center;
  vertical-align:middle;
  justify-content:center;
  align-items: center;
}

<div class="rectangle"> 
  Test
</div>

我需要有 6 个相对位置的 div 作为可点击的按钮，其中 3 个向上，3 个向下，里面有特定的文本。问题是 - 当我写 2 或 3 个长单词（它们需要很长的宽度）时，一些按钮会向上或向下移动。我知道这是“display:inline-block”的问题。

超文本标记语言

<div class="Box_parent">
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div></a> 
<a><div id="Box_button"> <div class="box_text"> TEST   </div> </div></a> 
<a><div id="Box_button"> <div class="box_text">  REALLY REALLY REALLY LONG TEST </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  REALLY REALLY REALLY LONG TEST  </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div> </a> 
</div>

CSS

#Box_button{
height:300px;
width:300px;
background-color:#4286f4;
margin:15px 15px;
display: …

如何使表格数据td元素中的元素/文本垂直居中，填充其父表格行的整个高度tr？我认为 flexbox 是这里最好的方法。

这是我到目前为止尝试过的：https : //jsfiddle.net/3tr0cn4s/1/