获取CSS元素以自动调整为内容宽度,同时居中

前端之家收集整理的这篇文章主要介绍了获取CSS元素以自动调整为内容宽度,同时居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个CSS元素,它周围有一个边框,它可以有一个或多个框,所以整个div的宽度根据它内部存在多少个框而改变.但是,我希望这个整个div以屏幕为中心.

通常,为了中心事物,我只是使用:

margin-left: auto;
margin-right: auto;

但是,这一次,我必须浮动元素或使其成为内嵌块,所以div的大小将被调整到内容,如果我这样做,margin-left和margin-right auto不起作用,它总是只保留在屏幕的左侧.

目前我有:

#BoxContainer {
    display:inline-block;
    clear:both;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
}

我也试过用float:left而不是display:inline-block.

有没有人知道一个很好的方式来中心一个div,并允许它同时调整大小内容?任何帮助将不胜感激.

解决方法

你是否试图保持内联阻止,并将其放在设置为text-align:center的块级元素中?

例如.

HTML

<div id="BoxContainerContainer">
    <div id="BoxContainer">
        <div id="Box1"></div>
        <div id="Box2"></div>
        <div id="Box3"></div>
    </div>
</div>

CSS

#BoxContainerContainer {
    background: #fdd;
    text-align: center;
}

#BoxContainer {
    display:inline-block;
    border:thick dotted #060;
    margin: 0px auto 10px auto;
    text-align: left;
}

#Box1,#Box2,#Box3 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
}

似乎像你所描述的那样工作:http://jsfiddle.net/pauldwaite/pYaKB/

原文链接:https://www.f2er.com/css/216831.html

猜你在找的CSS相关文章