相关疑难解决方法(0)

我正在使用一个100%的父div高度的div.

div只包含一行文本.

div不能有固定的高度.

所以我的问题是.

如何垂直居中文本行？

我尝试过使用:

display: table-cell;  
line-height:200%;

如果重要的是div绝对定位.

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}

如何确保桌子的每个单元格在不使用固定尺寸的情况下变成方形？并在改变宽度时保持响应.

table {
  width: 90%;
}
td {
  width: 30%;
}
tr {
  /** what should go here? **/
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
<table>

我想创建图像框(带图像).
当文本位于框顶部时,它很难看.

如何将文本与中间对齐？
我试图使用vertical-align,但似乎它不起作用

演示我的代码

编辑:
您的解决方案适用于短消息.
但是,如果它们是多线的,它又是丑陋的.
是否有可能不增加线的尺寸如果我们不需要它？

有人可以解释我如何垂直对齐<a>元素中的文本- 所以两个文本都出现在红色框的中间？

http://jsfiddle.net/WeKtX/

这是我的HTML:

<ul>
<li><a href="#">this is a link</a></li>
<li><a href="#">this is an even longer link</a></li>
</ul>

和我的CSS:

li {list-style-type:none;margin:0;padding:0}
li a {width:100px;float:left;background:red;margin-right:20px;height:40px}

非常感谢任何指针

如何将文本水平和垂直居中？我不想使用绝对位置因为我尝试使用它而我的其他div变得更糟.还有另一种方法吗？

div {
    height: 400px;
    width: 800px;
    background: red;
}

<div>
    <h1>This is title</h1>
</div>
    

如何在一个保持页面中创建一个真正的中心CSS div跨浏览器？

我已经尝试过这个2007 css技巧 - 如何在中心正确居中一个对象,但正如你从我的JSFiddle中看到的那样,它不是100%的中心.

HTML:

<div class="center">
  <p>Text</p>
</div>

CSS:

.center{
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
  border:5px solid black;
}

我被告知:

垂直对齐仅适用于内联,内联块,图像和表格元素.
与text-align不同,它必须应用于子元素,与父元素相对.

但是,当我尝试在内联块元素上设置垂直对齐中间时,它不起作用.为什么？

#wrapper {
border: 1px solid black;
width: 500px;
height: 500px;
}
#content {
border: 1px solid black;
display: inline-block;
vertical-align: middle;
}

<div id = 'wrapper'>
<div id = 'content'> content </div>
</div>

我一直在努力让我的内容div中的文本垂直居中,我很难过.容器包括1个带标题的div和带有内容的1 div.

我尝试过如下元素:

vertical-align: middle;

并且还玩显示器/定位,但我没有运气.

目前的CSS如下:

.content-wrapper {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: left;
  text-align: left;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  color: #000;
  font-family: Montserrat;
  text-transform: none;
  -webkit-transform: translateY(40vh);
  transform: translateY(40vh);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
  transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
  padding-top: 10%;
  padding-right: 25px;
  padding-left: 30px;
  float: right;
  width: 35%;
  background-color: #f0f7fc;
}

我想把我的文字垂直居中

div class ="col-md-6"

并具有相同的高度

例:

当我制作网页时，当确实不需要图像或 SVG 时，我喜欢使用 unicode 字符作为图标。这对我来说很容易，而且使页面变得更轻。通常，这种方法效果很好，只是我总是不得不摆弄偏移量以使其正确居中。

是的，是的，我知道这个：

.someDiv {\n   width: 10px;\n   height: 10px;\n   line-height: 10px;\n   text-align: center;\n}\n

但问题是大多数字形本身并不是垂直居中的。这意味着我最终会\xe2\x97\x8f在带有 CSS 的方形容器中垂直偏离中心：

有没有一种 CSS 方法可以使字形居中而不是字体的平均线居中？（或者任何技术上集中的内容。）