How to use CSS style to vertically center the font in the table

The method of using CSS style to vertically center the font in the table is as follows:

There is a custom table as shown below. When the returned data changes, the text can be automatically centered.

//html  
//Use two divs as containers <el-col :span="3" class="col_row1">
                 <div class="grid-content1">
                  <div class="subject1">{{item.subject1}}</div>
                  </div>  
              </el-col>
//css
      .grid-content1 {
            // width: 3.125rem;
            width: 100%;
            height:3.75rem;
            display: table;
          }
          .subject1 {
            display: table-cell;
            vertical-align: middle;
          }

Supplement: Let's take a look at the CSS style below - font vertically and horizontally centered

<div class="tt">La La La</div>

 .tt{
            padding: 0px;
            width:500px;
            height:200px;
            text-align:center;
            background-color:#F69;

            display: table-cell;
            vertical-align:middle
        } 

Why, this is. All right. Look at the display: table-cell style, which is displayed as a table cell. In this way, vertical-align:middle property takes effect. It won’t work if you remove the display! !

1. Basic Concepts

First of all, it’s still a concept. It is important to introduce inline elements and block-level elements because some attributes can only be used for block elements, while others are just the opposite. Under certain circumstances, they can also be converted to each other, such as using display to set them.

1. Inline elements (also called inline elements):

(1) It does not occupy a whole line, but depends on the content. It has the following characteristics:

(2) You cannot set the width or height, nor the line height. The width increases with the content, and the height changes with the font size.

(3) Inline elements can have outer borders, but these borders do not affect the top and bottom, only the left and right.

(4) You can also set inner borders, but in IE6, inner borders do not work on top and bottom, only on left and right.

Commonly used inline elements are: a - anchor, b - bold (not recommended), br - line break, em - emphasis, font - font setting (not recommended), i - italic, img - image, input - input box, label - table label,

select - item selection, small - small font text, span - commonly used inline container, defines the text block, strike - middle strike, strong - bold emphasis

1. Block element:

(1) Always starts on a new line and occupies a whole line;

(2) Height, line height, margins and padding can all be controlled;

(3) The width is always the same as the browser width, regardless of the content;

(4) It can contain inline elements and other block elements.

Commonly used block-level elements are: div - the most commonly used block-level element, dl - a block-level element used with dt dd, form - interactive form, h1 - large title, hr - horizontal separator, ol - sorted form, p - paragraph, ul - non-sorted

List conversion: Use the display setting to make inline elements have the characteristics of block-level elements, and vice versa

2. Now let’s talk about some simple basic centering methods

1. Horizontally center the text in the block: text-align is used for block-level elements and acts on the text or images in the block elements that use it. So that they are centered horizontally.

This property can only be applied to block elements (or inline elements that are controlled as block elements by CSS, but not block elements that are controlled as inline elements). In a word, those elements that have the characteristics of block elements. This is easy to understand. Centering must be line-centered. If the element using it does not have a complete independent space in width, it certainly cannot center the text or image inside it.

This attribute of the parent element also affects the child elements below it. For example, if a div is set to text-align, the text inside it can be centered, and the text inside its child div can also be centered. However, the centering of text in the child element is centered in the child div, not in the parent div. That is, all the text in it will be centered relative to the div layer closest to it. Therefore, this property cannot be used to center a div within its parent div. (Not just divs, all elements that behave as block elements).

2 Block elements are horizontally centered (determine the block with the width set): margin. This is definitely something you know when you first come into contact with CSS.

Generally, you can set margin:0 auto ; this will center the block-level element in its parent element, centered top, bottom, left, and right.

If you just want to center it horizontally, set margin-left:auto;margin-right:auto ;

3 Block elements are horizontally centered (blocks of uncertain width):

In some other articles, I saw many methods to introduce the centering of blocks of uncertain width.

In fact, to put it simply, there is no need to be so troublesome. We can understand it this way: a block without an explicitly set width will occupy a single line by default according to the nature of block-level elements. So at this time, the block itself is the width of the browser window, and there is no need to set horizontal centering.

If the content in the block is centered at this time:

If the child elements of a block element are also block elements, you can use margin auto or something like that for the child elements;

If the child element of the block-level element is an inline element, the text-align we introduced at the beginning can also solve the problem;

For block elements, you can also set display to inline and then use text-align

4. vertical-align is used for vertical centering of inline elements

vertical-align, this can be used in a very complex way. After reading some articles and examples, I am a little confused. I will only talk about the simplest usage:

This property is used to

1. Inline elements (and block elements converted to inline elements)

2. Elements with display set to table-cell,

In Firefox and IE8, you can set the display value of the block-level element to table-cell to activate the vertical-align attribute. The display effect is the same as valign="center" in the table. But ie6,7 does not support it.

3. Elements like <td><tr>

Writing like this: vertical-align:middle; can set the vertical center of text or images. As long as this attribute is used for an element with the characteristics of an inline element, it will also work for text and images in its child elements. But the effect is to center the text or image relative to the parent element that is closest to it. This is similar to the part mentioned above about text-align.

5. Vertically center the text and images in block-level elements (determined by the height of the block. This is from another blog. It is really useful if there are only these texts in the block)

The vertical-align property cannot vertically center text in a layer (block-level element). Here is a clever way to set the height to be the same as line-height !

<div style="line-height:500px;height:500;"></div>

6. Vertically center text and images in block-level elements (block height is uncertain)

When the height of a block is uncertain, its height actually depends on the height of the content inside. If there are only text or pictures inside, then they will be naturally vertically centered, and there is no need to set it specifically.

If you really want to set something, for example, if you want the block to be larger and the text to be vertically centered in the block, you can set the padding, such as padding-top:20px;padding-bottom:20px ;

Of course, if the upper and lower margins are set differently, it will naturally not be centered.

7. Vertical centering of block-level elements

To set the vertical center of the block-level element in the parent element, you can refer to the method of horizontal centering of block-level elements (mentioned above) and set the margins. If you don't want to set horizontal centering, just set the top and bottom margins to auto.

You can also use vertical-align:middle; method, but the prerequisite is to set display to table-cell. In this case, please pay attention to browser compatibility issues.

Summarize

This is the end of this article about how to use CSS styles to achieve vertical centering of fonts in a table. For more relevant content on CSS table font vertical centering, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!