css如何让自适应宽度的块居中显示

  <div class=‘footer‘>
      <ul>
          <li>网站首页</li>
          <li>企业招聘</li>
          <li>联系我们</li>
          <li>讲师招聘</li>
      </ul>
  </div>
    .footer{
        width: 100%;
        height: 100px;
        background: black;
        position: fixed;
        bottom: 0;
        text-align: center;
    }
    .footer ul{
        display: inline-block;
        color: white;
    }
    .footer li{
        height: 100px;
        line-height: 100px;
        float: left;
        margin-right: 20px
    }

      在父级加上 text-align: center;   虽然这个属性只对行内元素有效,但是同时把需要居中的块设置上 display: inline-block; 这样就可以把块级元素转化为拥有块级属性的行内元素,从而让text-align生效,达到自适应宽度居中显示。

时间: 2024-12-12 04:23:56

css如何让自适应宽度的块居中显示的相关文章

CSS如何让浮动导航栏元素居中显示

CSS如何让浮动导航栏元素居中显示:制作导航栏是最为基础的布局技能之一,当然对于稍有经验的人员来说没有任何问题,不过对于初学者可能会有一定的困扰.普通的导航栏一般具有一下几个特点,整个导航栏居中,导航栏目具有,并且能够均匀分布,下面就是一个这样的简单代码实例.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

css+html实现自适应宽度的菜单学习

本文是利用css和html实现自适应于文本长度菜单. 实现后的效果图,如下: 实现代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>menu4.html</title> <meta http-equiv="keywords" content="keyword1,

css 多个不定数量提交按钮居中显示,纯css解决

前几天在公司修改一个css 多个按钮居中问题,其实这样的问题很多前端程序员都遇到过,举个例子吧: 在一行中有三个按钮或是两个按钮...个数不定,然后间距固定:然后就有很多人把所有按钮放到一个div中,把div置为margin:10px auto(距上10像素,居中,然后又给了一个固定宽度,按钮放在这个div中,这样按钮就不能具体居中了) ,也不通用如果按钮减少到两个 或一个怎么办, 也有很多人用javascript 动态的算出宽度然后计算一大堆,并且很多时候比好用 错误代码: 1 <!DOCTY

Css不规则背景图片在导航里居中显示

在css导航的制作中,出现个问题,以前做的导航都是左右对称的,只要利用margin:0 auto;就可以实现居中.但这次的图片模板中导航的左边宽,右边窄,如果都当成背景来布局,一眼会感觉这个导航没有在中间. 为了让其视觉上logo和导航菜单所在的白色区域居中,就要用相对定位和绝对定位了. left-side.pngright-side.png Html的代码如下: <div id="msg"> <div class="left-side">&

css实现一段不够一行时居中显示,多于一行时两端对齐

今天有遇到这个问题,不够一行要居中才好看,多于一行居中又很难看: 居中 两端对齐 一开始想用text-align-last:center; 可是这样结果是这样的: 单行的居中了 可是多行的最后一行也居中了... 后来改成这样: 1 <div class="text"><p>2. Tap WiFi Key Search</p></div> 2 <div class="text"><p>3. Ple

html中间块居中宽度自适应

说来,这个其实不是个多难的事情,但是,若没有经验或者没有了解过html原数在浏览器中显示的顺序,可能还真是个问题,不知如何调整. 先说明下,在确定了左右两边显示的块的宽度后,再让中间块的宽度自适应,这里就有一个前提,必须是中间块最后显示. css: 1 .left{ float:left; width:170px; background:#00f; } 2 .right{ float:right; width:170px; background:#0f0;} 3 .center{ backgro

从三栏自适应宽度布局到css布局的讨论

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left  middle  right  但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

独行DIV自适应宽度布局CSS实例与扩大应用范围

DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局.通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的布局技巧. 关键点:自适应,这个时候就不能使用固定的CSS宽度值,这个时候就只能使用百分比的宽度表达宽度. 关键代码:width:?% 以百分比为单位的百分比值,自然对象会根据设置百分比自动计算该对象宽度. 实例CSS代码: .box{ width:60%; height:80px; border:1px solid #F

css判断不同分辨率显示不同宽度布局实现自适应宽度

一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变变化(网页宽度自动随浏览器显示宽度而变宽变窄).随着发展,越来越多的电脑用户显示屏分辨率越来越高,但有的用户还是使用1024px的分辨率的显示屏(根据几个浏览器分辨率统计平台得到数据现在使用1200分辨率以下用户极少,但我们CSS布局时仍然需要至少考虑1024px分辨率用户),