让网页中视频、图片居中的CSS代码

让网页中视频、图片居中的CSS代码

网页制作时,文章内容中的视频和图片,如何居中对齐?

文本有text-aglin:center; 但这对视频和图片是无效的。

解决方法:我们可以把对象设置成块级元素,使用margin:auto; 使文章内容中的视频和图片居中对齐(同div居中方法)。

网页中视频、图片居中实例:

HTML代码:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>让网页中视频、图片居中的CSS代码</title>
</head>

<body>
  <div class="con">
    <img src="这里插入图片"/>
    <embed>这里插入视频</embed>
    文章内容输出!!!!!    
  </div>
</body>
</html>

CSS代码:

.con img{ display:block; margin:auto;}
.con embed{ display:block; margin:auto;}

让网页中视频、图片或div居中的原理:

是设置成块状区域,然后设置其margin的左右值为auto,上下值设置多少都可以。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1558.html

(6)
江山如画的头像江山如画管理团队
label文字与textarea、input垂直居中、顶部对齐的方法
上一篇 2018年3月18日 上午11:31
七天学会NodeJS-阿里前端技术部
下一篇 2018年3月20日 下午2:13

99%的人还看了以下文章

  • CSS3 制作精美圆角立体button

    CSS3 制作的精美圆角立体button,你可以改变代码,制作出自己需要的颜色和样式的按钮,点击下方运行查看效果。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l…

    2018年2月3日
    5.9K0
  • css实现圆角矩形、半圆、圆形效果—border-radius使用详解

    传统的圆角矩形实现,必须使用多张图片作为背景图案。CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了。 css实现圆角矩形、半圆、圆形效果的优点: * 减少维护的工作量,不再需要使用图片。 * 提高网页性能,网页的载入速度将变快。 * 增加视觉可靠性。某些情况下,背景图片会下载失败,CSS3就不会发生这种情况。   b…

    2018年2月3日
    20.0K0
  • 阿里云每天营收3888万元,从云服务收入看云计算发展潜力

    据IDC在2017年发布的中国公有云市场份额调研结果显示,前三名分别为阿里云、腾讯云、金山云,市场占有率分别为47.6%、9.6%、6.5%。可以看出,阿里云在国内云计算市场中遥遥领先。

    2018年2月2日
    5.9K0
  • 网页中的块级元素和行内元素

    块级元素(block-level)在默认显示状态下占据整行,其他元素在下一行中显示。例如,<p>、<h1>、<div>等元素都是块级元素。 行内元素(inline-level,也叫作“内联”元素)与块级元素相反,在默认显示状态下,允许下一个对象与它本身在一行中显示。例如,<strong>、<a>、&…

    2018年7月10日
    6.0K0
  • css语法及命名规范(入门)

    css语法规范: 每条属性声明占一行,增加易读性 /*bad*/ body{margin: 0;padding: 0;} /*good*/ body{ margin: 0; padding: 0; } 颜色采用十六进制写法,并尽量简写: /*bad*/ .example{ color: #ffaabb; } /*good*/ .example{ color:…

    2018年7月10日
    5.0K0
  • wordpress成功更新5.3,解决无法在线更新,手动更新后编辑器无法使用等问题

    今天125网页设计升级了网站主题,发现后台无法使用了,问了售后说是要wordpress5.0以上版本才支持。 于是开始升级wordpress黑暗的一天到来了…… WordPress 5.3 正式版于北京时间2019年11月13日 发布 在线升级wordpress,先后遇到各种问题,耗时一天才解决,也给升级wordpress 5.3的朋友们分享,避免掉进各种坑…

    2019年11月28日
    11.7K0

发表回复

登录后才能评论