Same containers height, but centered text inside

Hi there. My question is about the “References” element at the bottom of this page. See how the two li there are with different height. I want to make the height to be the same (54px), but the text of the first to be centered vertically. How can i achieve that with css?

Are you sure that’s the right link?

I see this:

which doesn’t seem to fit with your description of the issue.

Sorry for the late answer. This is on resolution lower than 1530px. Im talking about this:

Ah - OK. My monitor isn’t that wide.

In this proof of concept, your HTML is unchanged.

Modifying your existing CSS to fit this proof of concept should be simple. I’m just not willing to sift through the clutter of classes to do it for you. Color me lazy. The explanatory comments might be helpful information.

This is a “working page” example. Copy it to a file and open it in your browser to see how it works.

Your use of fixed widths between breakpoints is annoying. The “problem” that you reported depends on the user using the same font and font-size as you. I did not see it because my font and font-size are slightly larger than yours… there I always saw/see one or two lines in both columns, never one and two lines.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>table w/2 cells</title>
<!--
https://www.sitepoint.com/community/t/same-containers-height-but-centered-text-inside/278222
Pegrew
Oct 13, 2017 3:39 AM
-->
    <style>
ol {
    list-style:none;
    display:table;
    width:100%;  /* necessary for table-layout:fixed alogrithm to create cells of equal width */
    table-layout:fixed;   /* does not apply when display:block kicks in for narrow widths */
    background-color:#f2f9fe;
    border:1px dotted blue;
    border-radius:.75em;
    border-spacing:.75em;    /* does not apply when display:block */
    padding:0;
    margin:0;
}
li {
    display:table-cell;
    vertical-align:middle;   /* does not apply when display:block */
    background-color:#fff;
    border:1px dotted blue;
    line-height:1.4;
    padding:.5em .75em;
}
@media screen and (max-width:800px) {
    ol,li {display:block; width:auto;}  /* replaces display:table and display:table-cell above */
    li {margin:.75em;}  /* replaces space created by border-spacing above */
}
    </style>
</head>
<body>

<ol class="lst-lnks mid b-sh clear" itemscope="" itemtype="http://schema.org/OfferCatalog">
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="http://www.wsj.com/articles/odd-odds-vegas-now-takes-olympics-bets-including-serbian-water-polo-1470926065" target="_blank">Sports Odds for Odd Sports</a> (Vegas Opens for Olympic Bets)
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://www.thespread.com/odds" target="_blank">Real-time Live Betting Line Odds</a> (Compare Top Sports Sites Odds)
    </li>
</ol>

</body>
</html>

Basically same method as Rons post above but uses over-rides instead so your original remains untouched.

Just add this code to the end of the css file and it should work.

@media screen and (min-width:1331px) {
	.lst-lnks {
		display:table;
		border-spacing:30px 15px;
		width:98%;
		padding:0;
		margin:auto;
	}
	.lst-lnks li {
		display:table-cell;
		float:none;
		width:50%;
		vertical-align:middle;
	}
	.lst-lnks:before, .lst-lnks:after {
		display:none
	}
}

Of course the correct answer is to do as Ron said and alter the rules directly to save over-riding/un-doing styles. :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.