Question

我试图让文字与图像的确切中心对齐。我已经看过w3schools的例子以及其他一些例子并且无法让他们工作。

我遇到的另一个问题是让容器中的图像填满整个容器。它没有盒子阴影就可以做到这一点但是只要我把一个盒子阴影放在它上面就会填满大部分容器。

这是我的小提琴：http://jsfiddle.net/DPMC87/nztcg4u2/

                     <div id="image">
                        <a href="http://www.facebook.com">
                            <p id="image-text">
                              Hello World!</p> 
                            </div>

Answer 1

将max-width css中的100%属性更改为#image

#image {
   max-width:100%;
}

让我知道你在中心对齐中究竟想要什么。

因为根据我的说法，它已经是中心对齐的您是希望horizontal还是vertical居中对齐

Answer 2

http://jsfiddle.net/hjqe3cej/

我对您的代码进行了一些更改，主要是：

/* fill entire DIV element with your image */    
background-size: cover;

对于<p>元素：

/* absolute positioning required for this to work */
position: absolute;
/* start the <p> element half-way from the top of your container */
top: 50%;
/* make sure it's flush to the left so that your text is in the center, horisontally */
left: 0;

/* to be as accurate as possible, you should know what would be the height of your text block */
height: 20px;
/* and then subtract half of it to ensure your text is dead center vertically */
margin-top: -10px;

此外，请确保您使用HTML5对此页面进行编码，因为HTML4标准不允许<a>

中的块元素

Answer 3

以下模式将简短地帮助你。

#image a{
display:table-cell;
max-height:100%;
max-width:100%;
height:500px;
width:500px;
vertical-align:middle;
}

要查看实时演示，请点击此处：

https://jsfiddle.net/Salehin/nztcg4u2/4/

CSS图像文本叠加到图像中心和图像框阴影奇怪

3 个答案: