CSS line elements and block elements are converted to the center of each other

Oneblock-level element in-line element

Div, H1, or p elements are often referred to as block-level elements . This means that these elements appear as a piece of content, the " Block box ". In contrast, elements such as span and strong are called " inline elements ," because their content is displayed in the row, which is the " inline box ."

You can use the Display property to change the type of box that is generated. This means that by setting the display property to block, inline elements (such as the <a> element) behave like block-level elements. You can also set the display to none so that the generated elements do not have a box at all. In this case, the box and all its contents are no longer displayed and do not occupy space in the document.

However, in one case, block-level elements are created, even if they are not explicitly defined. This happens when you add some text to the beginning of a block-level element, such as a Div. Even if the text is not defined as a paragraph, it is treated as a paragraph:

<div>                                    shows the effect as: some text                                         some text<p>some more text.</p>                            some more text.</div>

In this case, this box is called the Nameless block box because it is not associated with a specially defined element.

A similar situation can occur with the text line of a block-level element. Suppose you have a paragraph that contains three lines of text. Each line of text forms a nameless box. You cannot apply a style directly to a nameless block or a row box, because there is no place to apply the style (note that the row and inline boxes are two concepts). However, it helps to understand that everything you see on the screen forms some kind of box.

Second, the horizontal center　

In-line elements and block-level elements are different, for inline elements , simply set the Text-align=center in the parent element;

There are several centering methods for block-level elements :

1. Place the element in the table, and then set the table's Margin-left and margin-right to auto, centering the table so that the block-level element leaf is centered in it, but this method does not conform to the specification of the semantic label;

2. Convert block-level elements into inline elements (by setting display:inline) and then center. This way the center element becomes an inline element and cannot be set to the width height;

3. Set the parent element float:left,position:relative,left:50%; the child element float:left,position:relative,left:-50%, which is centered by the relative layout. The above three ways have advantages and disadvantages, Depending on the usage scenario, choose.

Three, vertical center　

1. For elements that know the height can be set up and down padding equal;

2. Set Line-height and Height equal

3. Use Vertical-align, but this attribute is only applicable in tr,td, so the element can be placed into the table in the center

Source

The code is as follows:

<!--horizontally centered--
<!--inner Element center simply set text-align in the parent element--
<div class= "Father" >
<p class= "Blockcenter" >
Hehe</p>
</div>
<!--Table Center--
<table class= "Tableclass" >
<tr>
<td>
<ul class= "Ulclass" >
<li><a href= "#" > Ah </a></li>
</ul>
</td>
</tr>
</table>
<table class= "Tableclass" >
<tr>
<td>
<ul class= "Ulclass" >
<li><a href= "#" > Ah </a></li>
<li><a href= "#" > Ah </a></li>
<li><a href= "#" > Ah </a></li>
</ul>
</td>
</tr>
</table>
<table class= "Tableclass" >
<tr>
<td>
<ul class= "Ulclass" >
<li><a href= "#" > Ah </a></li>
<li><a href= "#" > Ah </a></li>
<li><a href= "#" > Ah </a></li>
<li><a href= "#" > Ah </a></li>
<li><a href= "#" > Ah </a></li>
</ul>
</td>
</tr>
</table>
<!--change blocks and elements into line elements centered--
<ul style= "{text-align:center}" >
<li style= "{display:inline}" >nihao </li>
</ul>
<!--use relative layout--
<ul class= "Relativecenterfather" >
<li class= "Relativecenterchild" > Hello </li>
</ul>
<!--Vertical Center--
<!--1. Set the same up and down padding--
<!--2. Parent element Height and line-height
<div style={background: #000; Width:500px;color: #fff;line-height:100px;text-align:center}>
I'm going to go on a trip.
</div>
<!--3. Vartical-align, this one only works for TR,TD.
<table>
&LT;TR verticla-align= "center" height= "background=" #FF00FF ">
<td> A string of the year </td>
</tr>
</table>

CSS Styles

Copy CodeThe code is as follows:
<style type= "Text/css" >
. Father
{
width:500px;
}
. inlinecenter
{
Text-align:center;
Float:left;
}
. blockcenter
{
width:100px;
Margin-left:auto;
Margin-right:auto;
Text-align: "Center"
}
. tableclass
{
Margin-left:auto;
Margin-right:auto;
}
. ulclass
{
List-style:none;
margin:0;
padding:0;
}
. Ulclass Li
{
Float:left;
Display:inline;
Text-align:center;
}
. Ulclass Li A
{
Text-align:center;
Float:left;
Background: #316AC5;
Color: #fff;
}
. ulclass Li A:hover
{
Background: #fff;
Color: #316AC5;
}
. relativecenterfather
{
Float:left;
position:relative;
left:50%
}
. relativecenterchild
{
Float:left;
position:relative;
left:-50%;
}
/* erector spinae Straight Center */
. Wrap
{
Background: #000;
width:500px;
Color: #fff;
height:100px;
line-height:100px;
}
</style>

CSS line elements and block elements are converted to the center of each other