css水平居中的各种方法

css水平居中的各种方法

说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了。

但是,有时候会发现这样写了也没出效果。原因是什么呢?  请往下看。

水平居中:分为块级元素居中和行元素居中

 

行内元素:

行内元素就是内联元素。例如<span>、<a>、<label>、<em>、<img>等。。

直接构建一个具有 ”text-align:center“样式的容器,那么里面包含的行内元素就会都居中了。

 <div style="text-align:center;border-style:solid">
        <p style="border-style:solid">我是块级元素,我不居中</p>
        <span style="border-style:solid">我是行内元素,我要居中</span>
    </div>

效果如图:

有没有发现不对,块级元素怎么“看起来”也居中了?给<p>加上宽度后:

 <div style="text-align:center;border-style:solid">
        <p style="border-style:solid;width:500px">我是块级元素,我不居中</p>
        <span style="border-style:solid">我是行内元素,我要居中</span>
    </div>

效果如图:

原来只是里面的文本居中了!

 

 

块级元素:

块级元素有:div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table

大家都知道块级元素是可以设置height和width的,那么这就又

分为定宽与不定宽。

定宽:

定宽其实很好解决。直接margin:0 auto就可以实现容器居中,再加上text-align:center才可以让文本居中。

    <p style="border-style:solid;text-align:center;margin:0 auto;width:500px">我是定宽块级元素,我要居中</p>

效果如图:

 

不定宽:

不定宽其实是用的最多的,如这种导航栏:

因为导航栏中的内容是会变化的,所以宽度就不能定死了。要居中的话有三种方法,其中一种是利用table标签的特性,感觉适用性不是很好就不介绍了。

1、直接把元素改为行内元素,既display:inline,然后就可以用text-align:center了。但是这样width和height就不能设置了。

css:

复制代码

  .container{
    text-align:center;
}
.container ul{
    list-style:none;
    padding:0;
    display:inline;
}
.container li{
    margin-right:8px;
    border-style: solid;
    display:inline;
}

复制代码

body:

复制代码

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

复制代码

效果下:

2、下面使用父级元素浮动和相对定位以及lelf:50%。子元素照样设置但left:-50%。

整改后的css代码:

复制代码

.container ul{
    list-style:none;
    float: left;
    position: relative;left: 50%;
    padding:0;
}
.container li{
    margin-right:8px;
    float: left;
    position: relative;left:-50%;
}

复制代码

效果是一样的,就不贴图了。(首先,ul设置左浮动是为了 使得ul的宽度不是100%,而是 几个li宽度的总和。 之后ul相对定位 使用left把ul移动到剧中位置。因为相对定位是以原来的位置为原点的,所以先整体移动中间,这样子ul元素的左边是中心线,那么里面ul里面的li只要left:-50% 或者right:50%就居中了)

关于浮动可以参考这篇文章:http://www.th7.cn/web/html-css/201401/17089.shtml

 CSS3新特性实现起来更方便:http://www.cnblogs.com/zuochengsi-9/p/7659489.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1 目标检测的定义 目标检测(Object Detection)的任务是找出图像中所有感兴趣的目标(物体),确定它们的类别和位置,是计算机视觉领域的核心问题之一。由于各类物体有不同的外观、形状和姿态,加上成像时光照、遮挡等因素的干扰,目标检测一直是计算机视觉领域最具有挑战性的问题。 目标检测任务可分为两个关键的子任务,目标定位和目标分类。首先检测图像中目标的位置(目标定位),然后给出每个目标的具体类别(目标分类)。输出结果是一个边界框(称为Bounding-box,一般形式为(x1,y1,x2,y2),表示框的左上角坐标和右下角坐标),一个置信度分数(Confidence Score),表示边界框中是否包含检测对象的概率和各个类别的概率(首先得到类别概率,经过Softmax可得到类别标签)。 1.1 Two stage方法 目前主流的基于深度学习的目标检测算法主要分为两类:Two stage和One stage。Two stage方法将目标检测过程分为两个阶段。第一个阶段是 Region Proposal 生成阶段,主要用于生成潜在的目标候选框(Bounding-box proposals)。这个阶段通常使用卷积神经网络(CNN)从输入图像中提取特征,然后通过一些技巧(如选择性搜索)来生成候选框。第二个阶段是分类和位置精修阶段,将第一个阶段生成的候选框输入到另一个 CNN 中进行分类,并根据分类结果对候选框的位置进行微调。Two stage 方法的优点是准确度较高,缺点是速度相对较慢。 常见Tow stage目标检测算法有:R-CNN系列、SPPNet等。 1.2 One stage方法 One stage方法直接利用模型提取特征值,并利用这些特征值进行目标的分类和定位,不需要生成Region Proposal。这种方法的优点是速度快,因为省略了Region Proposal生成的过程。One stage方法的缺点是准确度相对较低,因为它没有对潜在的目标进行预先筛选。 常见的One stage目标检测算法有:YOLO系列、SSD系列和RetinaNet等。 2 常见名词解释 2.1 NMS(Non-Maximum Suppression) 目标检测模型一般会给出目标的多个预测边界框,对成百上千的预测边界框都进行调整肯定是不可行的,需要对这些结果先进行一个大体的挑选。NMS称为非极大值抑制,作用是从众多预测边界框中挑选出最具代表性的结果,这样可以加快算法效率,其主要流程如下: 设定一个置信度分数阈值,将置信度分数小于阈值的直接过滤掉 将剩下框的置信度分数从大到小排序,选中值最大的框 遍历其余的框,如果和当前框的重叠面积(IOU)大于设定的阈值(一般为0.7),就将框删除(超过设定阈值,认为两个框的里面的物体属于同一个类别) 从未处理的框中继续选一个置信度分数最大的,重复上述过程,直至所有框处理完毕 2.2 IoU(Intersection over Union) 定义了两个边界框的重叠度,当预测边界框和真实边界框差异很小时,或重叠度很大时,表示模型产生的预测边界框很准确。边界框A、B的IOU计算公式为: 2.3 mAP(mean Average Precision) mAP即均值平均精度,是评估目标检测模型效果的最重要指标,这个值介于0到1之间,且越大越好。mAP是AP(Average Precision)的平均值,那么首先需要了解AP的概念。想要了解AP的概念,还要首先了解目标检测中Precision和Recall的概念。 首先我们设置置信度阈值(Confidence Threshold)和IoU阈值(一般设置为0.5,也会衡量0.75以及0.9的mAP值): 当一个预测边界框被认为是True Positive(TP)时,需要同时满足下面三个条件: Confidence Score > Confidence Threshold 预测类别匹配真实值(Ground truth)的类别 预测边界框的IoU大于设定的IoU阈值 不满足条件2或条件3,则认为是False Positive(FP)。当对应同一个真值有多个预测结果时,只有最高置信度分数的预测结果被认为是True Positive,其余被认为是False Positive。 Precision和Recall的概念如下图所示: Precision表示TP与预测边界框数量的比值 Recall表示TP与真实边界框数量的比值 改变不同的置信度阈值,可以获得多组Precision和Recall,Recall放X轴,Precision放Y轴,可以画出一个Precision-Recall曲线,简称P-R
### 回答1: 可以使用如下的CSS代码实现垂直水平居中: ``` .container { display: flex; justify-content: center; align-items: center; } ``` 其中,`.container`是包含需要居中的元素的容器。使用`display: flex`属性可以使容器变为弹性盒子,`justify-content: center`和`align-items: center`可以分别将元素水平和垂直居中。 ### 回答2: 在CSS中,有多种方法可以实现元素的垂直和水平居中。以下是几种常用的方法: 1. 使用Flexbox布局:在父元素上应用以下样式可以实现垂直和水平居中: ``` display: flex; justify-content: center; align-items: center; ``` 这样可以使子元素在垂直和水平方向上居中。 2. 使用绝对定位:如果元素的宽高是已知的,可以使用绝对定位来实现居中。父元素需要设置相对定位,并在子元素上应用以下样式: ``` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); ``` 通过将子元素的左上角移动到父元素的中心来实现垂直和水平居中。 3. 使用表格布局:将父元素的display属性设置为table,子元素的display属性设置为table-cell,然后应用以下样式可以实现居中: ``` display: table; margin: 0 auto; ``` 将子元素的左右边距设置为auto可以使其在水平方向上居中。 以上是几种常用的CSS垂直和水平居中方法,具体使用哪种方法取决于具体的需求和布局。 ### 回答3: 在CSS中,可以使用以下方法实现元素的垂直水平居中: 1. 使用Flexbox布局:设置父容器的display属性为flex,并且使用align-items和justify-content属性分别设置为center,可以实现元素的垂直水平居中。 ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. 使用绝对定位和transform属性:将需要居中的元素的position属性设置为absolute,然后使用top、bottom、left和right属性设置为50%,并使用transform属性进行偏移。 ```css .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 使用表格布局:将需要居中的元素放置在一个display属性设置为table的容器中,然后使用margin属性设置为auto实现水平居中,使用vertical-align属性设置为middle实现垂直居中。 ```css .container { display: table; margin: 0 auto; } .box { display: table-cell; vertical-align: middle; } ``` 4. 使用Grid布局:设置父容器的display属性为grid,然后使用place-items属性设置为center,可以实现元素的垂直水平居中。 ```css .container { display: grid; place-items: center; } ``` 以上是几种常用的CSS垂直水平居中方法,可以根据具体的需求选择合适的方法来实现布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值