Align vertical text from left side

Question

I have a web page where I want to align my text vertically from the left side which are currently align from the right side.Here is my code in js fiddle: https://jsfiddle.net/r1uoyks6/ I have tried several CSS property like vertical-align text-align float:clear .But failed to achieve the result.I had to <br/> to position the <p> below one another.Tried display:inline-block property but no success.

 .taker { margin-top: 3em; position: relative; display: inline-block; } .teacher { margin-left: 4.0em; margin-top: 7em; clear: left; float: right; } .teacher_name { margin-left: 4.0em; margin-top: -1.5em; vertical-align: middle; float: right; display: inline-block; } 

 <div class="taker"> <p class="teacher">Submitted To,</p><br/> <p style="vertical-align:right;" class="teacher_name">Dr. NM Golam Zakaria</p><br/> <p style="vertical-align: right;" class="teacher_name">Professor</p><br/> <p style="vertical-align: right;" class="teacher_name">BUET</p><br/> </div> 

Answer 1

you can try this code and always use text-align property.

 .taker { margin-top: 3em; display: inline-block; } .teacher { margin-left: 4.0em; margin-top: 7em; text-align: left; } .teacher_name { margin-left: 4.0em; margin-top: -1.5em; text-align: left; display: inline-block; float:left; } 

 <div class="taker"> <p class="teacher">Submitted To,</p><br/> <p class="teacher_name">Dr. NM Golam Zakaria</p><br/> <p class="teacher_name">Professor</p><br/> <p class="teacher_name">BUET</p> </div> 

Answer 2

The value right doesn't exist for vertical-align in CSS. Maybe you meant text-align ? Otherwise see MDN for allowed values of vertical-align .

I've removed all floating, positioning and aligning rules from your CSS, so that the text is (per default) left aligned. Is this what you want?

 .taker { margin-top: 3em; display: inline-block; } .teacher { margin-left: 4.0em; margin-top: 7em; vertical-align: middle; } .teacher_name { margin-left: 4.0em; margin-top: -1.5em; vertical-align: middle; display: inline-block; } 

 <div class="taker"> <p class="teacher">Submitted To,</p> <br/> <p class="teacher_name">Dr. NM Golam Zakaria</p> <br/> <p class="teacher_name">Professor</p> <br/> <p class="teacher_name">BUET</p> <br/> </div>