CSS文字并排对齐和垂直对齐

Question

I have two columns of text side by side. One is right aligned and the other is left aligned.

Here is what I have so far:

 .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding-left: 0; list-style: none; } 

 <ul class="store-opening-hours list-unstyled"> <li> <div style="text-align:left;"> Monday <span style="float:right;">9:00 AM - 5:00 PM</span> </div> </li> <li></li> <li> <div style="text-align:left;"> Tuesday <span style="float:right;">9:00 AM - 5:00 PM</span> </div> </li> <li></li> <li> <div style="text-align:left;"> Wednesday <span style="float:right;">9:00 AM - 5:00 PM</span> </div> </li> <li></li> <li> <div style="text-align:left;"> Thursday <span style="float:right;">8:30 AM - 11:00 AM</span> </div> </li> <li> <div style="text-align:right;"> 12:30 PM - 2:00 PM </div> </li> <li> <b> <div style="text-align:left;"> Friday <span style="float:right;">9:00 AM - 2:30 PM</span> </div> </b> </li> <li> <b> <div style="text-align:right;"> 6:00 PM - 9:00 PM </div> </b> </li> <li> <div style="text-align:left;"> Saturday <span style="float:right;">9:00 AM - 5:00 PM</span> </div> </li> <li></li> <li> <div style="text-align:left;"> Sunday <span style="float:right;">Closed</span> </div> </li> <li></li> </ul> 

Here is the Jsfiddle link JsFiddle link .

The example above is side by side but the right align text is not vertically aligned as seen in this image:

How can I achieve this?

Answer 1

You can use table instead

<table>
  <tr>
    <td width="200">Monday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>8:30AM - 11:00AM</td>
  </tr>
  <tr>
    <td rowspan="2"><b>Friday</b></td>
    <td><b>9:00AM - 2:30PM</b></td>
  </tr>
  <tr>
    <td><b>6:00PM - 9:00PM</b></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>Closed</td>
  </tr>
</table>

Working Demo

 <table> <tr> <td width="200">Monday</td> <td>9:00AM - 5:00PM</td> </tr> <tr> <td>Tuesday</td> <td>9:00AM - 5:00PM</td> </tr> <tr> <td>Wednesday</td> <td>9:00AM - 5:00PM</td> </tr> <tr> <td>Thursday</td> <td>8:30AM - 11:00AM</td> </tr> <tr> <td rowspan="2"><b>Friday</b></td> <td><b>9:00AM - 2:30PM</b></td> </tr> <tr> <td><b>6:00PM - 9:00PM</b></td> </tr> <tr> <td>Saturday</td> <td>9:00AM - 5:00PM</td> </tr> <tr> <td>Sunday</td> <td>Closed</td> </tr> </table> 

Answer 2

How about using table as display properties?

 .list-unstyled { display: table; padding: 0; margin: 0; list-style-type: none; } .list-unstyled li { display: table-row; } .list-unstyled li .weekday { display: table-cell; width: 400px; text-align: left; vertical-align: middle; } .list-unstyled li .time { display: table-cell; width: 200px; text-align: left; } 

 <ul class="store-opening-hours list-unstyled"> <li> <div class="weekday"> Monday</div> <div class="time">9:00 AM - 5:00 PM </div> </li> <li> <div class="weekday"> Tuesday </div> <div class="time">9:00 AM - 5:00 PM </div> </li> <li> <div class="weekday"> Wednesday </div> <div class="time">9:00 AM - 5:00 PM</div> </li> <li> <div class="weekday"> Thursday </div> <div class="time">8:30 AM - 11:00 AM<br>12:30 PM - 2:00 PM</div> </li> <li> <div class="weekday"> <strong>Friday</strong> </div> <div class="time">9:00 AM - 2:30 PM<br><strong>6:00 PM - 9:00 PM</strong></div> </li> <li> <div class="weekday"> Saturday </div> <div class="time">9:00 AM - 5:00 PM </div> </li> <li> <div class="weekday"> Sunday </div> <div class="time">Closed </div> </li> </ul> 

Answer 3

Maybe you could do this by adding span class to the timing and days. These spans have a fixed width so that the text aligned.

<ul class="store-opening-hours list-unstyled">
    <li>
        <div>
            <span class="days">Monday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days">Tuesday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days">Wednesday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days">Thursday</span>
            <span class="timings">8:30 AM - 11:00 AM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days"><br></span>
            <span class="timings">12:30 PM - 2:00 PM</span>
        </div>
    </li>
    <li>
        <b>
            <div>
                <span class="days">Friday</span>
                <span class="timings">9:00 AM - 2:30 PM</span>
            </div>
        </b>
    </li>
    <li>
        <b>
            <div>
                <span class="days"><br></span>
                <span class="timings"> 6:00 PM - 9:00 PM</span>
            </div>
        </b>
    </li>
    <li>
        <div>
            <span class="days">Saturday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>

            <span class="days">Sunday</span>
            <span class="timings">Closed</span>
        </div>
    </li>
</ul>

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.days {
    width: 75%;
    float: left;
    text-align: left;
}

.timings {
    width: 25%;
    float: right;
    text-align: left;
}

Working code