A few simple CSS settings problems: Div Center, ul Li does not wrap, content beyond the auto-variable ellipsis, etc.

1 Div in the center of the page problem

1) when theposition value is relative (relative positioning), the CSS settings property margin:0 Auto; (0 auto, which indicates that the upper and lower bounds are 0, the left and right are adaptive to the same value according to the width, that is, centered).

2)position value is relative (absolute positioning), CSS settings Properties text-align:center;  left:50%; margin-left:-500px; (the left margin Margin-left is set to a negative value of half the current div width).

code example:

. page {    position:absolute;    width:1000px;    Background-image:none;     Text-align:center;    Left:%;    Margin-left:-500px;}

CSS negative values combined with z-index can achieve some very good things, but negative use always has a great hidden trouble, especially when the page content assignment.

2 ul Li all elements arranged in one line and other ways

UL as our most commonly used list element, sometimes we want to put the following Li on the same line,

1) Set UL List-style-type:none; (generally the default is the black dot in front of each column, the format of the list is none, you can remove the dots or squares before each column.) ）

2) Set the float of UL and Li : left; (left float, i.e. each element is arranged from left to right)

code example:

. Tableclass ul{    float: left;    height:50px;    left:30px;    line-height:50px;    Position:absolute;    List-style-type:none;}. Tableclass ul li{    float: left;    width:100px; }

3 div content too much, we sometimes need to be out of the section omitted, also very simple

1) Set the div's white-space:nowrap; (set div content without wrapping, guaranteed to be on one line)

2) Set the Overflow:hidden of the Div ; (The contents of the div are not displayed)

3) Set the text-overflow:ellipsis of the Div; (when the text overflows,ellipsis represents the omitted symbol to represent the trimmed text.) )

code example :

. videoname{  Position:absolute;  left:25px;  height:48px;  width:160px;  top:5px;  Font-size:15px;  Font-family:arial;  line-height:45px;  Text-align:left;  White-space:nowrap;  Overflow:hidden;  Text-overflow:ellipsis;}

A few simple CSS settings problems: Div Center, ul Li does not wrap, content beyond the auto-variable ellipsis, etc.