2019-01-22 图片水平垂直居中

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>定宽块状元素水平居中</title>

<style>

div{

    width:600px;

    height:300px;

    border:1px solid red;

    margin:20px;

}

.txtCenter{

text-align:center;

}

.imgCenter{

    text-align:center;

    display:table-cell;

    vertical-align:middle;

}

</style>

</head>

<body>

<div class="txtCenter">我想要在父容器中水平居中显示。</div>

<!--下面是任务部分-->

<div class="imgCenter"><img src="http://img1.sycdn.imooc.com/52da54ed0001ecfa04120172.jpg" /></div>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前面学习了使用HTML为网页添加内容,要对所添加的内容进行布局,就需要使用到CSS,JS等,这里就记录一下自己关于...
    wxyzcctn阅读 3,582评论 0 3
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 4,544评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,831评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,795评论 0 2
  • 我们都很乐意见到这个世界的成千上万副千奇百怪的模样。 我们从最初诞生到成熟长大,每一阶段的样子都不尽相同。幼年,我...
    沫生白夕阅读 3,496评论 0 0