Text not aligning in center
Question
I have created 4 columns. The first 3 columns are supposed to contain text vertically oriented. The problem is I am unable to align it. justify-content and align-items are not positioning the text in the center of the column. If you run the code you'll see it's positioned to the right. I want it to be exactly in center.
body{ margin:0; padding: 0; height: 100vh; width: 100vw; } .forAll{ height: 100vh; display: flex; justfiy-content: center; align-items: center; text-align: center; padding: 0; } .verticalOption{ transform: rotate(270deg); line-height: 10px; } .verticalOption a{ text-decoration: none; color: white; font-size: 10px; line-height: 5px; white-space: nowrap; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <body> <div class="no-gutters"> <div class="fluid-container d-flex flex-row-reverse"> <div class="container col-xl-9 col-9 col1 forAll bg-primary"></div> <div class="container col-xl-1 col-1 col2 forAll bg-warning"> <h1 class="verticalOption"><a href="#">Sample Text</a></h1> </div> <div class="container col-xl-1 col-1 col3 forAll bg-danger"> <h1 class="verticalOption"><a href="#">Sample Text</a></h1> </div> <div class="container col-xl-1 col-1 col4 forAll bg-success"> <h1 class="verticalOption"><a href="#">Sample Text</a></h1> </div> </div> </div> </body>
4 answers
solution1
3 ACCPTED 2019-04-01 22:34:58
I added another flex container to the column, so alignment can be controlled further into the HTML nesting. I also justified the content of the column to center . I also made the h1 display inline-flex to remove all extra white-space.
Here is where all the classes have been added:
<div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center">
<h1 class="verticalOption d-inline-flex m-0">
<a href="#">Sample Text</a>
</h1>
</div>
Demo
body{ margin:0; padding: 0; height: 100vh; width: 100vw; } .forAll{ height: 100vh; display: flex; justfiy-content: center; align-items: center; text-align: center; padding: 0; } .verticalOption{ transform: rotate(270deg); line-height: 10px; } .verticalOption a{ text-decoration: none; color: white; font-size: 10px; line-height: 5px; width: 200px; white-space: nowrap; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <body> <div class="no-gutters"> <div class="fluid-container d-flex flex-row-reverse"> <div class="container col-xl-9 col-9 col1 forAll bg-primary"></div> <div class="container col-xl-1 col-1 col2 forAll bg-warning d-flex justify-content-center"> <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1> </div> <div class="container col-xl-1 col-1 col3 forAll bg-danger d-flex justify-content-center"> <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1> </div> <div class="container col-xl-1 col-1 col4 forAll bg-success d-flex justify-content-center"> <h1 class="verticalOption d-inline-flex m-0"><a href="#">Sample Text</a></h1> </div> </div> </div> </body>
solution2
0 2019-04-01 22:31:36
Just do text-align:center on your h1.
If that doesn't work, its most likely cause you're hardcoding your width to your a tag, and that 200px is probably larger than the container itself.
solution3
0 2019-04-01 22:50:32
抱歉，我在justify-content: center输入错误，这导致了此问题。
solution4
0 2019-04-01 22:56:04
You just have to add two lines in .verticalOption :
vertical-align:center;
display:table-cell;
and delete justfiy-content: center;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.