本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

Bootstrap 中心浮动 div

发布于2022-01-05 12:18     阅读(1045)     评论(0)     点赞(21)     收藏(5)


我试图将一块浮动的 div 居中。我希望 div 始终居中。

我创建了一个小提琴:

http://jsfiddle.net/b6qev/1/

这是我的代码。

HTML

<div class="container">
    <section id="works">
        <div class="row text-center" style="background-color:#015891; margin-bottom:10px; color:white; padding:10px;">WORKS</div>
        <div id="boxWrap">
            <div class="view"></div>
            <div class="view"></div>
            <div class="view"></div>
            <div class="view"></div>
        </div>
    </section>
</div>

CSS

.view {
   width: 300px;
   height: 200px;
   margin: 0 15px 15px auto;
   float: left;
   overflow: hidden;
   position: relative; 
   background:black;
}

#boxWrap {
 margin:0 auto;
 text-align:center;
}

谢谢,弗朗切斯科


解决方案


你的小提琴不包括你的代码,但是

我在这里更新了

将您的.view课程更改为以下内容(删除float: left;,position:relative并添加margin-left: auto, margin-right: auto

.view {
   width: 300px;
   height: 200px;
   margin-top: 15px;
   margin-bottom: 15px;
   margin-left: auto; //add this
   margin-right: auto; //add this
   overflow: hidden;
   background:black;  
}



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/282246/67a331248b82ac3b59cc/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

21 0
收藏该文
已收藏

评论内容:(最多支持255个字符)