0

I would like to make my text centered, as you can see below:

enter image description here

I have tried several approaches, but nothing was working.

Aligning a float:left div to center?

It looks like the float:left is needed, when we want to have two divs side by side

Two divs side by side - Fluid display

This stuff is working, but I need the text on the left centered in the middle of the box show.

My code looks as follows:

         <figure class="linkbox">
         <a class="linkurl" href="http://www.deckchair.com/" target="blank">
        <div class="links">Deckchair</div>
        <div class="desc">Text content
        </div>
        <div style="clear:both"></div>
        </a>
        </figure>

CSS

 .links {
 display:flex;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 float:left;
 font-weight:bold; 
font-size:large; 
 min-width:100px;
  }

   .desc {
  display:grid;
 text-align:justify;
 margin-right: 5px;
 margin-left: 20%;
  }

Is there any option to center the text on the left with retaining the responsiveness of the page?

Geographos
  • 827
  • 2
  • 23
  • 57
  • I'll suggest you to read more about flexbox, with this css property you don't need float left to align side by side elements – Sfili_81 Sep 10 '21 at 10:26

1 Answers1

2

First, I would recommend not to wrap multiple div into an anchor tag. here is my code and a fiddle: https://jsfiddle.net/nwxvzs1f/2/

<figure class="linkbox">
     <a class="linkurl" href="http://www.deckchair.com/" target="blank"></a>
    <div class="links">Deckchair</div>
    <div class="desc">Text content
    </div>
    <div style="clear:both"></div>
    </figure>

.links {


display:flex;
 flex-wrap:wrap;
 justify-content:center;
 align-items:center;
 float:left;
 font-weight:bold; 
font-size:large; 
 min-width:100px;
 width:50%;
 background-color: grey;
 height:100%;
  }

   .desc {
  display:grid;
 text-align:justify;
 margin-right: 5px;
 margin-left: 20%;
 width:50%;
  }
  .linkbox {
    height:300px;
    display:block;
    background-color: red;
    }

enter image description here

if this was not you are searching for, you are welcome to enhance your question.

MattOpen
  • 815
  • 11
  • 24
  • Basically it looks like I has completely forgotten about the width and height prperties. Since width works perfectly, I have problem with height. In your code the .linkbox is strictly defined to 300px. In my case its height is flexible. Probably that's why the height property doesn't work in my case. – Geographos Sep 10 '21 at 10:45
  • @MKR but the height from ".linkbox" could be also "height:100vh;" or at least set it to "100%" and it is relative to the parent div. – MattOpen Sep 10 '21 at 10:49
  • I used height: auto; it's the same as 100%. But in links the height % values don't work at all. I need pixels or at least vh units. However their placement is not equal, as the text length is different in tthe boxes (.desc). – Geographos Sep 10 '21 at 10:55