Question

http://i.stack.imgur.com/ffLj8.jpg

这就是我想要实现的目标。但由于某种原因，我无法做到正确，这就是我现在所拥有的：

http://i.stack.imgur.com/MHcuD.jpg

这是我的代码：

.blog-lockup
		max-width: 1000px
		margin: 0 auto
		
		.image
			position: relative
			+size(250px)
			
			img
				+size(250px)
				
			strong
				position: absolute
				top: 60%
				left: 0%
				+size(70px)
				text-align: center
				background: $lightred-color
				
				font-family: Verdana
				font-size: 14px
				font-weight: 400
				font-style: italic
				
				color: #FFF

<div class="blog-lockup">
	
		<div class="blog-1">

			<div class="image">
				<img src="../assets/img/blog/blog-1/thumb.jpg">
				<strong>04 SEP</strong>
			</div>
			
			<h5>Some Title Text with Love</h5>
			<p class="author">by James Vibar</p>
			
			<p>At vero eos et accusamus et iusto odio dignissimos
			ducimus qui blanditis praesantium voluptatum deleniti
			atque corrupti qtios dolores et quas molestias excepturi
			sint occaecati cupiditate non provident</p>
			
			<a href="#">Read More</a>
		
		</div>
  </div>

我正在使用sass btw。

Answer 1

最安全的方法是避免使用 CSS3 ，如果您必须支持旧浏览器。此方法适用于所有浏览器。

CSS-Tricks写了一篇文章。 https://css-tricks.com/centering-in-the-unknown/

.date-container{            <-- Your Red Box
  display: table;           <-- Set the Container to Display Table

  .date{
    display: table-cell;    <-- Set the Date to Display Table-Cell
    text-align: center;     <-- Align Text Center
    vertical-align: middle; <-- Set Vertical Alignment to Middle

    padding: 40px;          <-- Adjust Accordingly

  }
}

检查笔： http://codepen.io/luisreyes/pen/pjvrMj

Answer 2

如果它是一行文字和/或图像，那么很容易做到。只需使用

text-align: center;
vertical-align: middle;
line-height: 90px;

请参阅演示：DEMO PAGE

Answer 3

文本垂直对齐

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

水平对齐

.parentelement{
 text-align:center;
}

参考this，也可以使用“br tag”

来破坏你的句子

Answer 4

.colored-box{

        background-color:blue;
        padding:10px 20px 10px 20px;
        margin-left:10px;
        position:absolute;
        bottom:150px;
        text-align:center;
}

请参阅here

CSS：垂直和水平对齐文本？

4 个答案: