首页 文章

css单行或多行垂直对齐

提问于
浏览 次
75

我有一个可以有一行或多行的 Headers .

如何垂直对齐文本？如果总是一行，我可以将行高设置为容器高度 .

我可以使用JavaScript来做到这一点，但我真的不喜欢它，我正在寻找一种纯粹的CSS方式 .

此外，如果容器可以用线条扩展它将是完美的，所以我总是可以在顶部和底部具有相同的填充 .

enter image description here

html css

8 回答

  • 9

    为此，您可以使用 display:table-cell 属性：

    .inline {
  display: inline-block;
  margin: 1em;
}
.wrap {
  display: table;
  height:  100px;
  width:   160px;
  padding: 10px;
  border:  thin solid darkgray;
}
.wrap p {
  display:        table-cell;
  vertical-align: middle;
}

    <div class="inline">
  <div class="wrap">
    <p>Example of single line.</p>
  </div>
</div>

<div class="inline">
  <div class="wrap">
    <p>To look best, text should really be centered inside.</p>
  </div>
</div>

    但它适用于IE8及以上版本 . 阅读这篇文章了解更多信息：CSS Tricks: Vertically Center Multi-Lined Text .

    回复于
  • 9

    如果你不喜欢 display:table 技巧（我知道我不是没有它的解决方案：

    .cen {
  min-height:5em; width:12em; background:red; margin:1em 0;
}
.cen p {
  display:inline-block; vertical-align:middle;
  margin:0 0 0 1em; width:10em;
}
.cen::after {
   display:inline-block; vertical-align:middle; line-height:5em;
   width:0; content:"\00A0"; overflow:hidden;
}

    用HTML

    <div class="cen">
 <p>Text in div 1</p>
</div>

    这使得div的高度为5em，除非内容更高，否则它会增长 .
    实例here .

    编辑：哦，这应该适用于哪些浏览器？ IE8不会合作 .

    （稍后编辑：更新的CSS以处理Chrome中的问题）

    回复于
  • 3

    我真的很喜欢这个解决方案

    <div>
    <span style="display: inline-block; vertical-align: middle; height: --The height of your box here--"></span>
    <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>

    随意使用样式表，100％的高度...

    也可能需要注释span标记之间的空格，因为这些是内联块

    信用证转到Hades . 我是从Here得到的

    <div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here.</span>
</div>

<div style="outline:thin solid red;">
  <span style="display: inline-block; vertical-align: middle; height: 60px;"></span>
  <span style="display: inline-block; vertical-align: middle;">Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here. Put your multi-line content here.</span>
</div>

    Note: 这似乎不适用于多行内容 .

    回复于
  • 1

    这样的事

    HTML

    <div>
    <p>
       Lorem Ipsum is simply
    </p>
</div>

    CSS

    div {
   display: table;
}
p {
   display:table-cell;
   vertical-align: middle;
}
    回复于
  • 109

    如果你希望你的文本具有响应性，将字从一行包装到多行作为宽度是动态变化的，上面提到的 inline-block helper（这里具有最好的兼容性）的技巧可能是不够的，因为 .inlinehelper 可以将文本压缩到自身下面 .
    这是完成这样一个简单任务的完整解决方案：

    HTML：

    <div id="responsive_wrap">
    <span class="inlinehelper"><span id="content">        
</div>

    CSS：

    #responsive_wrap {   
   display: block;    
   height: 100%; //dimensions just for   
   width: 100%;  //example's sake
   white-space: nowrap;
}

#content {   
   display: inline-block;        
   white-space: initial;
}

.inlinehelper {
   height: 100%;    
   width: 0;
   vertical-align: middle;
   display: inline-block;
}

    Notice white-space:nowrap 属性，它可以防止 .inlinehelper 和 #content 相互缠绕 . white-space:initial on #content 重置 span 本身的包裹能力;

    Another Option: 更多是个人喜好的问题 . 您可以使用伪元素而不是 .inlinehelper . 删除 .inlinehelper css规则和元素，并添加此伪元素css选择器：

    #responsive_wrap:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0px;
}

    P.S . ：我发现这个问题太晚了，因此让这个答案成为现实，也许对某人有帮助 .

    回复于
  • 2

    样式方面，表格将是布置内容的最佳方式（将样式标记放在CSS中）：

    <table style="border:1;collapse;width:300px;padding:5px;background-color:red;">
<tr>
    <td style="width:250px;vertical-align:middle;">Lorem ipsum dolor sit amet ipswum dolor</td>
    <td style="width:50px;vertical-align:top;color:white;">1 Line</td>
</tr>

    行数需要JS脚本，请看这里：

    http://www.webdeveloper.com/forum/archive/index.php/t-44333.html

    回复于
  • 0

    我喜欢那种解决方案 . 我在stackoverflow中看到了这个技巧，但是不记得究竟在哪里 . 非常有用！ :)

    ul {
background: #000; 
  padding-left: 0;
}
ul li {
  height: 130px;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid #F7F7F7;
}
ul li:last-of-type {
  border-bottom: none;
}
ul li:after {
  color: #333;
  position: absolute;
  right: 35px;
  font-size: 40px;
  content: ">";
  top: 50%;
  margin-top: -24px;
  color: #FFDA00;
  -webkit-transition: 0.25s all ease;
  transition: 0.25s all ease;
}
ul li a {
  font-size: 35px;
  font-family: Arial;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 40px;
  height: 100%;
  line-height: 38px;
  display: inline-block;
  width: 100%;
  text-align: left;
  text-decoration: none;
}
ul li a:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
}
ul li a span {
  display: inline-block;
  vertical-align: middle;
}

    <ul>
	<li class="dn">
		<a href="kapec.ru.php"><span> Lorem ipsum 1 LINE</span></a>
		</li>
		<li>
			<a href="varianti.ru.php"><span>Lorem ipsum <br> 2 lines </span></a>
		</li>

	</ul>
    回复于
  • 0

    您可能想要查看名为 CSS display flex 的更新方法，而不是使用 vertical-align: center 和 display: table-cell .

    .box {
    width: 200px;
    height: 50px; 
    padding: 10px;
    margin-bottom: 20px;
    background-color: red;
    
    /* Only add these 2 lines */
    display: flex;
    align-items: center;
  }

    <div class="box">Lorem ipsum dolor</div>
<div class="box">Lorem ipsum dolor sit amet ipsum dolor</div>
    回复于

相关问题