CODEWITHSUNDEEP
htmlcsstext-alignment
Rami Alshareef
Rami Alshareef

Reputation: 7170

How to left-align text in a centered context

I can guess that I am missing something in here. Still can't left-align text in a centered div

here is a mimic sample of my final work:

<div class="grid-row">
        <img src="http://www.fununlimitedsports.com/wp-content/images/istockSUP.jpg" />
        <div class="profile-info">
            <div class="name"><a href="#">STUDENT NAME '14</a></div>
            <div class="occupation">Toured nationally with “West Side Story”</div>
            <div class="major">MAJOR: MUSIC THEATRE</div>
        </div>
    </div>

css:

 .grid-row {
        max-width: 980px;
        margin: 0 auto;
        position: relative;
        border: 1px solid green;
        text-align:center;
    }

How to keep the profile-info div centered inside the grid-row and maintain a left-aligned text at the same time for it's content?

fiddle

the image used is a random img from google

Edit: I need the div profile-info to still be in the middle of the grid-row and to left-align its text

Upvotes: 0

Views: 210

Answers (2)

RafaelTSCS
RafaelTSCS

Reputation: 1314

.grid-row {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    border: 1px solid green;
    text-align:center;
}

.profile-info {
    border:1px solid gray;
    margin:0 auto;
    text-align:left;
    width:200px;
}
<div clas="grid-row">
  <div class="profile-info">
    info
  </div>
</div>

I've edited your fiddle.

Upvotes: 1

sina72
sina72

Reputation: 5101

This centers the text box (margin: 0 auto;) and this aligns the text left (text-align:left;). Works only if the box is limited in width (for example width:300px;). 

.profile-info {    
   border:1px solid gray;
   text-align:left;
   width:300px;
   margin: 0 auto;
}

Upvotes: 3

Related Questions