CODEWITHSUNDEEP
htmlcss
Geographos
Geographos

Reputation: 1476

CSS problem with centering text when float:left is used

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?

Upvotes: 0

Views: 51

Answers (1)

MattOpen
MattOpen

Reputation: 824

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.

Upvotes: 2

Related Questions