Centering listed right-aligned paragraphs

Question

For starters there are many reasons that I can't change the html code so any solution must be using the current html code. What I am trying to do is to right-align the paragraphs but have them centered and not be on the right side of my screen because it doesn't look nice.

<ul class="ullist">
<li><p>sometext</p></li>
<li><p>somemoretext</p></li>
<li><p>somemoremoretext</p></li>
<li><p>lesstext</p></li>
<li><p>text</p></li>
</ul>

CSS:

 ul.ullist li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0;
    text-align: right;
}

ul.ullist li p {
font-size:2.4em;
color:#000;
font-weight:600;
white-space:nowrap;
display:inline-block;}

Not sure if you can do that with just css. You can kinda fake it with the answers below or something like this. https://codepen.io/anon/pen/JJamdO Can you use javascript? — Michael Coker, Jul 07 '17 at 17:51
@Michael Coker it can be done with CSS alone. Take a look at my answer. — Tejasvi Karne, Jul 07 '17 at 17:54
@TejasviKarne that's pretty much the codepen I posted. Just contain the width of the parent. Doesn't look like that's what OP wants - their `li`'s are much wider than the `p`'s. Looks like they want the `ul`/`li` to be fluid width width — Michael Coker, Jul 07 '17 at 17:56
@Michael Coker Maybe. We''ll have to wait until the OP responds. — Tejasvi Karne, Jul 07 '17 at 18:03
Hello everyone and thank you for your feedback. I really appreciate it. The thing is that I always try to have a responsive layout. So adding fixed numbers or percentages while the user can adjust the screen doesn't really help. I tried using margin-right for now but then I had to use media queries in order to avoid a bad result for different browser sizes. — Mdermez, Jul 07 '17 at 18:29

score 1 · Answer 1 · answered Jul 07 '17 at 17:48

You can add margin-right to your paragraphs:

ul.ullist li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0;
    text-align: right;
}

ul.ullist li p {
    font-size:2.4em;
    color:#000;
    font-weight:600;
    white-space:nowrap;
    display:inline-block;
    margin-right: 10%;
}

<ul class="ullist">
    <li><p>sometext</p></li>
    <li><p>somemoretext</p></li>
    <li><p>somemoremoretext</p></li>
    <li><p>lesstext</p></li>
    <li><p>text</p></li>
</ul>

Thank you for your input. Even though this is not what I am looking for I had to go with your solution and add media queries to control the aesthetic layout when resizing the browser. — Mdermez, Jul 07 '17 at 18:32

Tejasvi Karne · Answer 2 · 2017-07-07T18:33:55.287

Try setting some width on ul.ullist and set margin:auto on it.

ul.ullist{
min-width:200px;
width:300px; /*Change the width to suit your needs*/
margin:auto;
}
ul.ullist li {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0;
    text-align: right;
}

ul.ullist li p {
font-size:2.4em;
color:#000;
font-weight:600;
white-space:nowrap;
display:inline-block;}

<ul class="ullist">
<li><p>sometext</p></li>
<li><p>somemoretext</p></li>
<li><p>somemoremoretext</p></li>
<li><p>lesstext</p></li>
<li><p>text</p></li>
</ul>

Centering listed right-aligned paragraphs

2 Answers2