要居中一个HTML元素,我可以使用CSS左:50%;。但是,这使得元素相对于整个窗口居中。

我有一个元素,它是<div>元素的子元素,我想让子元素以<div>这个父元素居中,而不是整个窗口。

我不希望容器<div>的所有内容居中,只是一个特定的子。


当前回答

如果你想使用CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

您可能需要做进一步的搜索,以弄清楚如何使百分比适合元素的宽度。

其他回答

如果子元素是内联的(例如不是一个div,表格等),我会把它包装在一个div或一个p,并使包装器的文本对齐css属性等于中心。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

否则,如果元素是一个具有固定宽度的块(显示:块,例如div或p),我将其左距和右距css属性设置为auto。

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

当然,您也可以向wrapper元素添加text-align: center,使其内容也居中。

我不会费心定位,因为依我之见,这不是OPs问题的解决方法,但一定要查看这个链接,非常有用。

左:50%分别工作到最近的父静态宽度分配。尝试宽度:500px或在父div。或者,让你需要的内容居中显示:块,并设置左右边距为auto。

弯曲后,它显示文章

.container { 显示:flex; 颜色:蓝色; 背景颜色:黄色; justify-content:中心; } < div class = "容器" > < div > < / div元素> < / div > 如果你水平和垂直地设置元素中心。

.container { 显示:flex; 颜色:蓝色; 身高:100 px; 背景颜色:黄色; justify-content:中心; 对齐项目:中心; } < div class = "容器" > < div > < / div元素> < / div >

例如,我有一个文章div里面的主要内容div.. 在文章里面有一个图片,图片下面是一个按钮,样式如下:

.article {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

} .article {

}

/*在文章里面,我想让图像居中*/

文章{

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/*现在,在同一article元素的这张图片下,应该有一个按钮,如阅读更多。当然,当它在响应式设计中时,你需要使用em或%

.button {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

祝你好运

如果你想使用CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

您可能需要做进一步的搜索,以弄清楚如何使百分比适合元素的宽度。