让网页中视频、图片居中的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%的人还看了以下文章

  • 实施多元化线上教学,引导学生自主学习

    如何有效开展线上教学,调动学生的学习热情、课堂参与,是当下高校教师普遍关心的问题。结合使用腾讯会议+雨课堂的《生态学》线上教学,我的教学总结和反思如下: 设计好线上课程的整体布局和开展思路,让学生熟悉各授课环节。授课前通过雨课堂发布预习课件,如:阅读电子材料、观看嵌入式视频、设置目标思考题、完成预习检测、课堂讨论或其拓展调研题目等。学生自主完成学习,建立初步…

    2020年5月9日
    10.8K0
  • 推荐:只有569KB的专业网页木马查杀工具(绿色免安装)

    一款只有569KB的专业网页木马查杀工具,永久免费,绿色软件,无须安装,下载后即可双击使用。支持本地快速查杀、远程FTP查杀和实时查杀三种模式。

    2018年2月12日
    14.2K0
  • CSS3 制作精美圆角立体button

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

    2018年2月3日
    6.3K0
  • 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.3K0
  • 消除img图片与div下边界之间空白的三种方法

    在div中插入图片,图片会和div下方有几像素高的空白,本文介绍了三种消除img图片与容器下边界之间空白的方法。

    2018年2月7日
    11.8K0
  • DIV+CSS自适应布局:三列布局

    自适应布局允许网页宽度或高度自动调整,以获得良好的用户体验。自适应布局有高度自适应和宽度自适应,本文讲解了三列布局,学会三列自适应布局,两列自适应布局的原理一样。

    2018年2月20日
    12.8K0

发表回复

登录后才能评论