章节
问答
课签
笔记
评论
占位
占位

水平居中设置-行内元素

我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。

这里我们又得分两种情况:行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中?

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素:如下面的html代码中,div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码:

html代码:

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

css代码:

<style>
  .txtCenter{
    text-align:center;
  }
</style>

 

任务

我来试试:把右侧的图片设置为水平居中显示。(记得点击右上角的全屏按钮查看效果哦!)

备注:这一小节没有正确性验证,请查看结果窗口,从而判断输入代码是否正确。

?不会了怎么办

参考代码:

div.imgCenter{
    text-align:center;
}

 

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / hzsu
你加点宽度就看到效果了

最新回答 / 知性x
要设置的是父类div属性,你指定的是子类img属性

最新回答 / 一只小白鼠i
margin边距

最赞回答 / 慕仔1034694
div标签只是定义了一个区域块,如果没有对div标签定义样式,加不加看上去是一样的。只有对div标签定义样式,才会看出加了div标签的效果!

最赞回答 / 向美梅
display:inline

最新回答 / 慕少0439226
你好,你写得代码的意思是,给所有的div都指定了样式。实际情况中,并不是所有div的样式都一样。

最赞回答 / 一个前端的小白
对 一个意思 叫法多种

最新回答 / 慕码人2447526
问题1:1.就近原则:离他最近的前辈就是。比如<div><span>例1</span></div>,div就是span的父元素;    2.命名原则:根据命名来看。比如radio是radio1的父元素

最新回答 / IU4270169
如果你想问的是想知道网站上的某个图片的网络地址的话,你在图片上右键后点击在新标签页打开图片,新打开的标签页的网址就是图片地址了。

最新回答 / Jaxon呀
块元素需要通过a{display:block;}设置

最赞回答 / qq_慕的地3278379
其实你给span加个boder你就明白了。虽然此时文本的父元素确实是span,但是span的默认大小是和文本一样大的,因为容器和文本大小一致,所以给span设置text-align也是不会居中的。可以理解为此时span和文本是一体的,要相对div居中才能实现居中。因此还是得给div加text-align才能实现文本居中。

已采纳回答 / 小小苏苏
父元素就是上一级元素。标签A包含中包含标签B,那么标签A就是标签B的父元素。

最新回答 / 魔卡师121238
在这个里面效果一样,直接在style写text-align:center;是对整个html进行了居中处理,所以图片也居中了。不是单设置图片居中。imgCent是随便取的名字,只要是字母都可以的。

已采纳回答 / qq_xy_29
text-align:center的作用就是通过div来给div里的文本进行水平居中功能实现的div 里的文本是行内元素,div的确实块状元素是没错的。这样理解就好了  
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言