Centralized Text Using Flex Property in CSS

Question

I am just learning Angular.Actually I am trying to centralized text using Flex.I tried and the text also centralized but the problem was it is not look like professional.Can you please help me with this.I want like:

                                 Account Name  Dev
                                       Region  North Virginia
                                    User Name  Ramya

I tried and it looks like:

                                 Account Name  Dev
                                Region  North Virginia
                                  User Name  Ramya

CSS I tried:

<div style="flex: 1">
<div  style="display: flex;flex-direction:row;justify-content:center;">
    <span>Account</span>
    <span>{{' ' + recoveryaccount}}</span>
</div>  
<div  style="display: flex;flex-direction:row;justify-content:center;">
    <span>Region</span>
    <span>{{' '}}{{selectedrestorepoint?.instances?.length  ? (selectedrestorepoint.instances[0].aws_region | region) : ' '}}</span>
</div>
</div>

I want the above format.Can you please help with this.Seriouly I am struggling. Thanks in advance :)

@Chellappanவ Actually It is doing wrapping.I don't want to wrap the data.It should displayed as flexible.How Can I do that? — codebuff, Jan 25 '20 at 06:30

score 0 · Answer 1 · answered Jan 25 '20 at 06:02

0

if you want to use flex box to put the element at the center of you div, the best and reliable way is, using the flex class in the bootstrap. the link below help you surely about using the flex box to center the element. i wish it helps you.

https://www.w3schools.com/bootstrap4/bootstrap_flex.asp

answered Jan 25 '20 at 06:02

Seyed-Amir-Mehrizi

720
1
5
19

Thank you for your response.I will go through it. – codebuff Jan 25 '20 at 06:05

score 0 · Answer 2 · answered Jan 25 '20 at 06:23

0

As you said you are currently learning. Below link is a great source as per me for understanding flex and its functionality. Hope this helps.

https://tburleson-layouts-demos.firebaseapp.com/#/docs

answered Jan 25 '20 at 06:23

AshishKh

46
5

Shravan · Accepted Answer · 2020-01-25T11:11:25.737

What you are trying to acheive is displaying data in tabular form, for which you should be using CSS grids or CSS tables as they are designed for these usecases.

Though the below snippet acheives what you want using CSS flexbox solution, I won't recommend using this approach.

<html>
<head>
<title>Sample</title>
<style>
 .flex-container {
  display: flex;
  justify-content: center;
 }
 .flex-item {
  width: 50%;
  padding: 0 5px;
 }
 .flex-item:first-of-type {
  text-align: right;
 }
</style>
</head>
<body>
<div class="flex-container">
 <span class="flex-item">Account</span>
 <span class="flex-item">Dev</span>
</div>  
<div class="flex-container">
 <span class="flex-item">Region</span>
 <span class="flex-item">North Virginia</span>
</div>
<div class="flex-container">
 <span class="flex-item">User Name</span>
 <span class="flex-item">Ramya</span>
</div>
</body>
</html>

PS: Use CSS paddings or margins to add space between elements instead of adding space character in HTML template.

Hope this helps you. Happy coding!

Edit: Refer the below links for more information on CSS tables and grids.

Centralized Text Using Flex Property in CSS

3 Answers3