How to custom align content in columns but keep text left aligned? - html

Question

I'm trying to align text content in a column. I don't know how I can align the whole content to the center or to the right of the column and keep the text content left aligned.
I have added an example to jsfiddle: https://jsfiddle.net/k58vr4nq/
Currently the colums looks like this:
|-----------------------------------------------|
|Lorem ipsum |Lorem ipsum |Lorem ipsum |
|dolor sit |dolor sit |dolor sit |
|amet |amet |amet |
|consetetur |consetetur |consetetur |
|sadipscing |sadipscing |sadipscing |
|-----------------------------------------------|
I'm expecting something like this:
|-----------------------------------------------|
|Lorem ipsum | Lorem ipsum | Lorem ipsum|
|dolor sit | dolor sit | dolor sit |
|amet | amet | amet |
|consetetur | consetetur | consetetur |
|sadipscing | sadipscing | sadipscing |
|-----------------------------------------------|

Answer 1

First, you add your text for each column in div, so it becomes element with width of widest text line. Then, you use flexbox on parent (col element) and align the divs however you want.
HTML:
<div class="container">
<div class="row">
<div class="col text-container left">
<div>
Lorem ipsum<br/>
dolor sit<br/>
amet<br/>
consetetur<br/>
sadipscing<br/>
</div>
</div>
<div class="col text-container middle">
<div>
Lorem ipsum<br/>
dolor sit<br/>
amet<br/>
consetetur<br/>
sadipscing<br/>
</div>
</div>
<div class="col text-container right">
<div>
Lorem ipsum<br/>
dolor sit<br/>
amet<br/>
consetetur<br/>
sadipscing<br/>
</div>
</div>
</div>
</div>
and CSS:
.col {
border: solid 1px #6c757d;
}
.text-container {
display: flex;
}
.middle {
justify-content: center;
}
.right {
justify-content: flex-end;
}
Here's jsfiddle of complete solution: https://jsfiddle.net/7vetqkrz/

Answer 2

For that purpose, you would have to wrap your col content inside an element:
<div class="col">
<div class="content">
Lorem ipsum<br/>
dolor sit<br/>
amet<br/>
consetetur<br/>
sadipscing<br/>
</div>
</div>
Then you would have to style that content class with some margin:
.content {
margin-left: 1rem;
}
Fiddle: https://jsfiddle.net/2ukyqo7m/4/

Answer 3

Add your content into a block with display: inline-block so it fits to size, align within that block, then align the block.
See below (I wouldn't do it inline, it's there to show what's going on):
Here's your fiddle updated
<div class="container">
<div class="row">
<div class="col">
<div style="display: inline-block; text-align: left">
Lorem ipsum<br/> dolor sit<br/> amet
<br/> consetetur
<br/> sadipscing
<br/>
</div>
</div>
<div class="col text-center">
<div style="display: inline-block; text-align: left">
Lorem ipsum<br/> dolor sit<br/> amet
<br/> consetetur
<br/> sadipscing
<br/>
</div>
</div>
<div class="col text-right">
<div style="display: inline-block; text-align: left">
Lorem ipsum<br/> dolor sit<br/> amet
<br/> consetetur
<br/> sadipscing
<br/>
</div>
</div>
</div>
</div>

Answer 4

add to CSS
.text-center{
text-align: left;
padding-left: 1em;
}
.text-right{
}