前端的居中的问题

最新推荐文章于 2024-04-02 14:52:40 发布
最新推荐文章于 2024-04-02 14:52:40 发布
阅读量422 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qishuixian/article/details/50773994
版权

                                      前端的居中的问题

1、垂直居中：a、结合使用height和line-height:这两个值相等。    b、设置padding值

</head>

<styletype="text/css">

div{

   width: 200px;

}

p{

   line-height: 100px;

   height: 100px;

}

</style>

<body>

   <div>

      <p>1221233</p>

      <p>1111 </p>

   </div>

</body>

2、元素水平居中：在其父辈元素中加入：text-align:center;

div{

   width: 200px;

   text-align:center;

}

}

</style>

<body>

   <div>

      <span>1221233</span>

      <span>1111 </span>

   </div>

</body>

3、小图片的居中：在包含小图片标签中添加vertical-align的样式。

<styletype="text/css">

.bg-title{

   background:url(/images/tuku/bg-title.png)no-repeat center;

   vertical-align:middle;

}

</style>

<body>

   <div>

      <a id="full"target="_blank" href="#" class="comment">

        <i class="bg-titlebg-map2"></i>查看原图

      </a>

   </div>

</body>

web行路人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于前端元素居中的方法集合
码小目的进化路程
03-27 2334
主要讲述了如何进行元素居中,首先判断元素类型,综合考虑后期的维护运营问题决定选择何种方式居中.
html5居中的九种方法
热门推荐
qq_55818379的博客
04-14 1万+
一、text-align：center;） 这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。 二、使用margin:0 auto;水平居中 前提：给元素设定了宽度和具有display：block；的块级元素。 让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 au
前端技术中的几种居中方式
zhouwenying999的博客
11-14 7579
几种常用的前端水平、垂直居中方式
前端的那些居中方法
weixin_45627194的博客
11-12 1万+
一，最常用 div页面居中，实例如下 width: 600px; height: 400px; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; div中的文字水平居中：dutext-align:center；即可。 div中的文字垂直居中：line-height:值。 二，几种定位（position）的居
前端HTML元素居中的几种方式及原理
weixin_45276056的博客
12-05 1577
HTML元素居中的10种方式 1、text-aligin:center text-aligin属性 是没有浮动的情况下，可以先将要居中的块级元素设为inline/inline-block， 然后在其父元素上加上属性text-align:center; 如果要居中的块级元素直接是内联元素（span、img、a等），直接在其父级元素上加上属性text-align:center; 2、绝对定位+偏移(已知道宽高，需计算偏移值) 优点：兼容性好。 缺点:必须知道元素的宽高。 .box1 { positi
前端开发中最实用的【六种css居中对齐】方法，纯干货无废话
最新发布
weixin_42147268的博客
04-02 1690
前端开发中最实用的【六种css居中对齐】方法，纯干货无废话
前端居中的多种方式
qq_43541679的博客
01-09 2205
前端居中的多种方式 所有例子共用以下代码 <!--html--> <div id="outer"> <div class="inner"> </div> </div> 绝对定位 50%的父元素宽高减去自身宽高的50% /*css*/ #outer { width: 500px; height: 300px;
CSS布局之--各种居中
weixin_30629653的博客
10-30 314
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。 注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。 先来说几种简单的、人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-ri...
Java-eclipse 设置字体字号大小，如何设置居中
weixin_47702002的博客
07-01 3727
文字一般都放在 标签内： 这里以 JLable 与 按钮 为实例： //表题**标签** label = new JLabel("个人停车详情",JLabel.CENTER);//设置字体居中 label.setFont(new Font("微软雅黑", Font.BOLD, 20));//设置字体字号大小 label.setBounds(452, 35, 178, 53);//设置标签显示位置，大小 contentPane.add(label); //退出 **按钮** exitBtn = new J
前端学习第三天：CSS基础之关于居中的三种方法
weixin_58280614的博客
04-16 287
CSS基础之关于居中的三种方法 1.文本垂直居中 在CSS中当行高等于盒子高度时，文本可垂直居中。 line-height=height文本垂直居中。 注意：如果文字过多使标签中的文本形成了两行或多行，则对应行高应成比例变化。 2.text-align:center 这句写到父级，可使子级中的行元素，行块元素，文本内容水平居中。 3.块元素居中 margin: 0 auto ＣＳＳ基础中可使用此句来实现块元素水平居中。 ...
web前端开发中的各种居中
newbie_ling的博客
11-20 1万+
一，水平居中 方法① ：行内元素 （父元素）text-align，（子元素）inline-block .parent{text-align: center;} .child{display: inline-block;} 总结： 优点：兼容性好，支持低版本浏览器 缺点：需要同时在父元素和子元素上设置 适用场景：子元素数量少（或只有一个），并且需要兼...
Java Swing 字体居中显示
LzwGlory的专栏
08-28 9488
在开发Swing程序的时候，很多情况下为了美观，我们需要将字体水平和垂直居中于某一个控件。         让我们先来说说居中的算法。其实很简单，将外面控件的长度减去显示内容的长度，然后除以2，这样就得到了放置内容的X坐标。同理，将控件的高度减去内容的高度，然后除以2，就得到了Y坐标。通过X，Y坐标我们就可以在指定点上绘制内容了，这样的算法适用于任何需要居中显示的情况。但是如果需
web前端---居中方式
liushaozhuanyong的博客
02-25 1885
文本居中:text-align。此时只是水平居中。如果将line-height设置为和父元素相同的高度，那么就能实现垂直居中了 未完待续...
web前端面试水平垂直居中详解
开心大表哥
06-26 6589
1.行内元素的水平垂直居中；通过在父元素中设置text-align，让子元素的文本进行居中；然后通过line-height属性让子元素的行高等于父元素的高度。<div id="div1"> <label id='divSpan'>行内元素水平垂直居中</label> </div> #div1{ background: #ccc; height: 200
前端基础——不知宽高如何居中
前端
12-30 832
假设有两个盒子，不知道子盒子的宽高 &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;box&amp;quot;&amp;amp;gt;&amp;amp;lt;/div&amp;amp;gt; &amp;amp;lt;/div&amp;amp;gt; 要实
前端清除浮动的几中方法
naisi2422553065的博客
02-23 2496
第一种 额外标签清除法 只要添加这句代码就可以 <div style="clear: both;"></div> 优点:简单易懂 缺点:添加了很多额外没用的标签破坏结构 事例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
前端水平居中以及垂直居中方法积累
不破小子
11-30 1万+
1.水平居中1.1已知宽度块元素宽度 :.child{width:1000px;margin:0 auto;} 1.2文本内容居中:.parent{text-align:center;} 1.3通过表格:.child{display:table;margin:0 auto;} 1.4已知宽度,通过设置position:absolute,margin-left为宽度的负一半.parent{positi
app前端开发，CSS盒模型居中方法
m0_60210205的博客
07-21 307
第一个阶段，开发环境和工具准备 浏览器 （Google，FireFox，…） 下载，安装前端开发工具vscode， 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境 下载、配置PHP和MySQL 第二个阶段，前端入门，网页制作 1，HTML： 常用标签（div标签，p标签，span标签，a标签，img标签） 锚点 列表标签（有序列表，无序列表，自定义列表） 表单标签 表格标签 标签分类 标签语义化 注释 字符实体 2，CSS： CSS介绍 全局
这15种CSS居中的方式，你都用过哪几种？
chelen_jak的专栏
03-26 913
原文出处：http://igeekbar.com/igeekbar/post/1068.htmCSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。1水平居中1.1 内联元素水平居中利用 text-align: center 可以实现在块级元素内...
前端居中文本（包括垂直居中，水平居中）
baidu_27686849的博客
05-30 1万+
一：居中效果实现小结&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1，文本居中&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文本水平居中：text-align:center;&nbsp;&nbsp;&amp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值