Shulou(Shulou.com)06/01 Report--

This article mainly introduces how the bootstrap vertical center, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

First, the vertical center of the picture

Let's look at the following code:

Nav in the code is the navigation base class, because we want to achieve vertical center, so we need to define a vertical navigation here. For the justify-content-center class used to achieve the vertical center of the content area, the picture can be centered horizontally through the class m-auto.

Second, the vertical center of the text

Let's take a look at the following code used to center the text:

Learning bootStrap!

We can refer to the practice in the code that is similar to our picture center, using the nav navigation base class to define a vertical navigation to achieve the vertical center effect, and the text to achieve horizontal center through the class text-center.

Third, it is realized through media objects.

Through this string of code, we can achieve the centring effect we need.

4. Vertical center when there are multiple columns

Let's first take a look at the relevant code:

The text is vertically centered horizontally, here is vertically centered, and here is vertically centered.

This is vertically centered.

In the code, we wrote three box styles, according to the normal order of box arrangement, we will see that the box is showing the effect of forming a column on the left. When we add styles and other settings, we will show a style that is side by side and then centered vertically. We also use the d-flex element to make a package container with the same height in the code, and then use the align-self-center style of media style. The vertical effect can be achieved.

Thank you for reading this article carefully. I hope the article "how to center bootstrap vertically" shared by the editor will be helpful to everyone. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.