html 文本对齐：居中不适用于div元素

46scxncf 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(129)

我已经搜索了大约45分钟，但没有找到解决我的问题的方法。我希望我的gallery类div（这些将被动态创建）只使用css规则在gallery_container div的中心对齐它们自己。我正在学习，所以任何解释都会很有帮助！
先谢了！

<head>
    <style>
    #gallery_container{
        text-align: center; 
        width:100%;
        overflow: auto; 
        background:orange;  
    }
    .gallery{
        text-align: left;   
        border-style: solid;
        border-width:3px;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px; 
        background:yellow;
        width:335px;
        padding:20px;
        float:left;
        margin:15px;
    }
    .gallery h2{
        margin-top:0;
    }
    .gallery img{
        height:120px;
        width:160px;
        float:right;
    }
</style>

<body>
    <div id ='content_gallery'>
        <h2>Gallery</h2>

        <div id='gallery_container'>
            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h2>Company bowling</h2>
                <h4>Date: June 14, 2013</h4>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>

            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h2>Company bowling</h2>
                <h4>Date: June 14, 2013</h4>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>

            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h2>Company bowling</h2>
                <h4>Date: June 14, 2013</h4>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>
        </div>
    </div>
</body>

这里是小提琴http://jsfiddle.net/9gwKc/1/

Html

来源：https://stackoverflow.com/questions/17177950/text-aligncenter-not-working-with-div-elements

1条答案

按热度按时间

jfewjypa1#

这可以通过使用inline-block显示器来完成，float:left将始终将元素发送到它们可能的最左边。

.gallery {
   text-align: left;   
   border-style: solid;
   border-width:3px;
   border-top-left-radius: 40px;
   border-bottom-right-radius: 40px; 
   background:yellow;
   width:335px;
   padding:20px;
   /*float:left; remove this*/
   margin:15px;
   
   /*add this*/ 
   display:inline-block;
   position:relative;
}

字符串

赞(0）回复(0）举报 2022-12-16

我来回答

html 文本对齐：居中不适用于div元素

1条答案

相关问题

热门标签

最新问答