display:inline-block居中方式

最新推荐文章于 2024-05-12 14:58:21 发布
最新推荐文章于 2024-05-12 14:58:21 发布
阅读量193 收藏
点赞数
原文链接：http://www.cnblogs.com/-CLAY-/p/display.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css"/>
    <style>
        .slider{
            width: 520px;
            height: 280px;
            overflow: hidden;
            position: relative;
        }
        .slider .img-list{
            width: 4000px;
        }
        .slider .img-list li{
            float: left;
        }
        .slider .img-list li img{
            width: 520px;
            height: 280px;
        }
        .slider .dots{
            position: absolute;
            bottom: 20px;
            width: 100%;/*父级宽度*/
            text-align: center;/*内容居中*/
        }
        .slider .dots .dot{
            width: 10px;
            height: 10px;
            background-color: #F00;
            border-radius: 50%;
            margin:0 2px;
            -webkit-box-shadow: 1px 2px 10px #000000;
            -moz-box-shadow: 1px 2px 10px #000000;
            box-shadow: 1px 2px 10px #000000;
            display: inline-block;/*转换为内联块级元素*/
            *dispaly:inline;
            *zoom:1;
            /*dipplay:inline-blok不兼容ie6，*内容兼容ie6*/
        }
        .slider .dots .dot.active{
            background-color: #ae0000;
        }
        .slider .arrow{
            display: inline-block;
            width: 20px;
            height: 40px;
            line-height: 40px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            text-decoration: none;
            color: #ffffff;
            text-align: center;
        }
        .slider .arrow:hover{
            background: rgba(0,0,0,0.8);
        }
        .slider .arrow.right{
            position: absolute;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul class="img-list cf">
            <li><img src="https://img.alicdn.com/tfs/TB1ILwrQFXXXXXtXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>
            <li><img src="https://img.alicdn.com/simba/img/TB1F_ZYQFXXXXcSXpXXSutbFXXX.jpg" alt=""/></li>
            <li><img src="https://img.alicdn.com/simba/img/TB1WWZEQFXXXXXoXpXXSutbFXXX.jpg" alt=""/></li>
            <li><img src="https://img.alicdn.com/tfs/TB102DLQFXXXXaFXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt=""/></li>
        </ul>
        <div class="dots">
            <a href="#none" class="dot"></a>
            <a href="#none" class="dot active"></a>
            <a href="#none" class="dot"></a>
            <a href="#none" class="dot"></a>
        </div>
        <a class="arrow" href="#none"><</a>
        <a class="arrow right" href="#none">></a>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/-CLAY-/p/display.html

bangfutu6930
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css使用display:inline-block垂直居中
qq_43542074的博客
08-01 1万+
使用 inline-block 水平垂直居中任意内容 <!-- 注释用于去除 inline-block `间隙` --> <div class="container"><!-- --><div class="center"> <h2>这个是居中标题</h2> <p>...
CSS中使用inline-block来进行居中的示例
09-25
主要介绍了CSS中使用inline-block来进行居中的示例,使用的时候注意一下容器的宽度,需要的朋友可以参考下
2024年网络安全最新垂直水平居中小技巧_inline-block不设置高度如何垂直居中(1)，2024年最新保洁阿姨看完都会了
最新发布
2401_84301948的博客
05-12 1051
在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。需要完整版PDF学习资源私我。
display inline-block 垂直居中
weixin_34241036的博客
09-20 1116
table td:after {display:inline-block;width:0;height:100%;vertical-align:middle;content:'';} 转载于:https://www.cnblogs.com/youngMe/p/5889096.html
使用display:inline-block,让标签居中
weixin_30657999的博客
10-30 153
其实在css样式里面能够实现元素居中的方法有很多，比如使用margin:0 auto;或者 text-align:center； 但是还有一种更简单的办法，效率也很快,举个例子： <div id="parent"><span id="child">你好</span></div>,我现在想让span标签整体在div里面左右居中，怎么办？ ...
使用display:inline-block居中没有宽度的元素
09-25
"使用display:inline-block居中没有宽度的元素"这个主题主要涉及到CSS中的两个关键概念：`text-align`属性和`display`属性的`inline-block`值，它们在实现动态或未知宽度元素的居中对齐上发挥着重要作用。...
display:table-cell实现兼容性的两栏自适应布局实现代码
09-25
为了解决这个问题，我们可以使用星号（*）前缀的 hack 方法，如`*display: inline-block`。这样，在不支持`display: table-cell`的浏览器中，元素会退化为行内块级元素，从而实现一种近似的布局效果。 以下是对提供...
inline-block中居中元素
千霜的博客
08-02 6648
&lt;span class="a"&gt; &lt;span class="b"&gt;luo&lt;/span&gt; &lt;/span&gt; 有这样一个父元素，被显示为inline-block元素，那问题是，如何居中里面的元素呢？ 先看看父元素的样式： .a{ display:inline-block; text-align:center; ...
inline-block实现元素水平居中
wenster1993的博客
07-27 2374
demo<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul { list-style: none outside none; paddin
inline-block内的子元素居中问题
FA的博客
11-11 1207
场景：黑色div设置了inline-block，子元素红色div水平排列 需求 1.如果需要红色div垂直水平居中，如上图，需要在黑色div中多加个属性 vertical-align: middle; 2.临时需要加一个圆，这个圆需要在红色div正中间，如果通过margin去调会发现，在响应拉动水平width的情况下，他是不会居中的，因为红色div有时候比蓝色div小，有时候比它大，这时候就很难动态设定 所以需要对蓝色div做以下处理 left: 50%; top: 50%; z-index: 10.
inline-block和block元素水平居中显示
zx93的博客
04-20 284
inline-block，就对其父级元素添加text-align:center，是block（块级元素）就对其本身添加margin:0 auto;
inline-block 配合伪元素实现元素垂直居中
qq_41549657的博客
07-13 2615
inline-block 实现元素垂直居中 1.元素的显示方式： 1 　　 display:inline; 3 display:linline-block; 5 　　 display:block display:inline 表示，元素做为内联元素显示，两个或者多个内联元素可以并列成一行显示；常见的内联元素如：span strong 标签；内联元素的特点是：(1)不能给内联元素设置宽和高；(2)元素和其他元素共占一行; display:block 表示，元素作为块级元素显示，...
css inline 元素 居中,详解CSS中使用inline-block来进行居中的示例
weixin_33661931的博客
08-03 1315
这篇文章主要详解CSS中使用inline-block来进行居中的示例,使用的时候注意一下容器的宽度,需要的朋友可以参考下迫切需要的方法：inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。内容区声明的宽度不能大于容器的10...
使用inline-block导致其他元素无法居中
u010218033的专栏
11-12 2220
今天遇到使用两个display:inline-block的div无法对齐的问题，情况如下。查了下发现两个并列的inline-block默认是基线对齐的，可通过设置vertical-align进行顶部对齐。 css代码： *{ margin: 0px; padding: 0px; } div{ display: inline-block;
web前端教程之页面元素水平居中
04-13 2912
小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候，往往面临着方法的选择，而各种方法有的简单，有的困难，还有的有一些坑，在选择方法时我们应该怎么做才能不走弯路呢？ 话不多说，现在就来分享我的一些方法，在分享之前我先查查秘籍 咳咳，下面是正式内容，以我们最常见的网页为例 上图网页中，红框部分内的左右元素都是水平居中显示的，其中既有大小不一的文本又有图片，面对这种情况只要我们解决其中一个，另外三个就很简单了，那么这一个我们应该怎么处理呢 水平居...
CSS 水平居中
weixin_33989780的博客
03-14 62
你不知道的那些事: 1、absolute： 相对最近的除了position：static之外的父元素偏移。默认：停留在父元素的content区域内！！ 但是！！！其实absolute的活动区域是父元素的padding+content，并不仅限于父元素，只是起点在父元素内的左上角。设置left：0，top:0;就发现和默认的不一致了！！！（默认不等同于left：0；top:0;） 所以，当你发现...
display:inline-block设置后，怎么居中？
04-30
如果你想将 `display: inline-block` 元素居中，可以使用以下方法： 1. 使用 `text-align: center` 属性将其父元素中的所有 `inline-block` 元素居中。 ``` .parent { text-align: center; } .child { display:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值