纯CSS如何实现上下左右都居中的代码

html-css025

纯CSS如何实现上下左右都居中的代码,第1张

纯css代码设置文字或者图片居中:

第一种办法:

直接用center来设置,

居中位置

第二种办法:

就是用距离来控制它的位置

margin:50

50

0

0；这种也可以固定到中间位置

根据实际情况来居中，看左右是否有添加的文字或者图片的代码。

CSS菜单.html   文件代码清单如下：

<!doctype html>

<html langj="zh">

  <head>

    <meta charset="utf-8">

    <title>CSS菜单</title>

    <link rel="stylesheet" href="cssmenu.css">

  </head>

  <body>

    <ul>

      <li><a href="">A</a></li>

      <li><a href="">B</a>

        <ul>

          <li><a href="">B1</a></li>

          <li><a href="">B2</a></li>

          <li><a href="">B3</a></li>

        </ul>

      </li>

      <li><a href="">C</a>

        <ul>

          <li><a href="">C1</a></li>

          <li><a href="">C2</a></li>

          <li><a href="">C3</a></li>

        </ul>

      </li>

      <li><a href="">D</li>

    </ul>

  </body>

</html>

cssmenu.css  文件代码清单如下：

/* cssmenu.css */

ul li, ul li:hover ul {

display: block

}

ul li ul {

display: none

}

1 .div:{height:auto,width:auto}任何块状元素的高度默认都是auto

2 .正确使用方法

3 .div{matgin:auto}

4 .textarea{overflow:auto}

5 .img,input,button{vertial-align:baseline}

6 .div{background-position:0 0}

1 .clear:both。前后没有直接的浮动元素，没有必要使用

2 .inline元素不起作用的单样式:height,width,clear,margin-top,margin-bottom,overflow

3 .block水平的元素对vertical-align属性没有作用

4 .组合起作用的元素：z-index+position left,top,bottom,right+position

5 .