What you need to do is employ two divs, or one <div> and a <p>: the first div with the property "text-align: center"; the second div (or p) with the properties "display: inline-block" and "text-align: left". Something like:
Code:
<div class="centerLeft">
<p class="inlineLeft">LOREM<br/>IPSUM DOLOR SIT AMET, CONSEC</p>
</div>
Code:
.centerLeft {
text-align: center;
}
.inlineLeft {
display: inline-block;
text-align: left;
}
Of course, you can add the property "font-weight: bold" inside the .inlineLeft class if you wish and reduce the width (by default is 100%). Regarding how to add the symbol at the left, maybe the easiest way is to employ the pseudo-element ::before; something like:
Code:
.centerLeft::before {
content: "©";
font-size: 2.4em; /* This size has to be linked with the line-height */
}
If you want to employ a line-height of 1.5em, then the full code would be:
Code:
.centerLeft {
text-align: center;
}
.inlineLeft {
display: inline-block;
font-weight: bold;
text-align: left;
line-height: 1.5em;
}
.centerLeft::before {
content: "©"; /* here, instead of the symbol, you need to write the url of your image */
font-size: 3em;
}
Here is the output: