A few simple css setting issues: div is centered, ul li does not wrap, the content exceeds the automatic ellipses, etc._html/css_WEB-ITnose

1 Problem with div centering on the page

1) When the position value is relative (relative positioning), the css setting attribute margin: 0 auto; (0 auto, indicating that the upper and lower boundaries are 0, the left and right will adapt to the same value according to the width, that is, centered).

2) When the position value is relative (absolute positioning), the css setting attribute text-align:center; left:50%; margin-left:-500px; (the left margin margin-left is set to the current div width Half of the negative value is enough).

Code example:

.page {    position:absolute;    width:1000px;    background-image:none;    text-align:center;    left:50%;    margin-left:-500px;}

CSS negative value combined with z-index can achieve some great results Nice stuff, but there are always big hidden dangers in using negative values, especially when assigning values ​​to page content.

2 ul li The way all elements are arranged in one line and others

ul is our most commonly used list element, sometimes we want to put all the li below it on the same line,

1) Set ul's list-style-type:none; (Generally, by default, there are black dots in front of each column. Set the list format to none to remove the dots or squares in front of each column.)

2) Set float:left; of ul and li (left floating, that is, each element is arranged in a single line 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 There is too much content in the div, and we sometimes need to omit the excess part, which is also very simple

1) Set the white-space of the div: nowrap; (Set the div content not to wrap, ensuring that it always In one line)

2) Set the div's overflow: hidden; (content beyond the div is not displayed)

3) Set the div's text-overflow: ellipsis; (attribute when the text overflows , ellipsis represents an ellipsis symbol to represent 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;}