Vertical align content inside slide to middle

Hi,

I have the following the markup:

<div class="carousel-inner" role="listbox">
    <div class="item active">
	<h1>Website Design</h1>
    <h2>Develop an online preence </h2>
    </div>
</div>

CSS:

.carousel-inner{
	padding: 5% 0;
}

.item{
	text-align: center;
	z-index: 100;
	position: relative;
	color: #fff;
	padding: 10% 0;
}

h1{
	font-size: 80px;
	font-weight: 700;
	font-family: "Raleway";
	font-weight: 700;
	text-transform: uppercase;
}


h2{
	font-size: 42px;
	font-family: "Roboto";
	font-weight: 100;
}

I am trying to align the H1 and H2 to be vertically aligned. I’;ve tried using percentages, which kind of works, but when it scales down, it doesn’t appear to be centered.

Does anyone know what I have wrong?

Presumably you want those headings horizontally aligned? Have you tried text-align: center on the headings themselves?

Hi,

Sorry, I may have phrased it a little wrong. The headings are fine and are centered horizontally, but I need them to be aligned vertically in the middle of the carousel-inner div.

Try this. It’s the code that you posted in a “working page” so we can see what you see.
Is anything missing?.. or extra?.. or invisible?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/vertical-align-content-inside-slide-to-middle/277112
toolman
-->
    <style>
.carousel-inner {
    padding: 5% 0;
}
.item {
    text-align: center;
    z-index: 100;
    position: relative;
    color: #fff;
    padding: 10% 0;
}
h1 {
    font-size: 80px;
    font-weight: 700;
    font-family: "Raleway";
    font-weight: 700;
    text-transform: uppercase;
}
h2 {
    font-size: 42px;
    font-family: "Roboto";
    font-weight: 100;
}
    </style>
</head>
<body>

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <h1>Website Design</h1>
        <h2>Develop an online preence </h2>
    </div>
</div>

</body>
</html>

This is a repeating pattern of inadequate presentation. I would like to ask that you give a little more thought to how you present your issues. Please.

Even after giving the text a color other than white, or the background a color so the white text will be visible, I still do not understand exactly what you wish to achieve. Each line of text (each header) is horizontally centered. Nothing is vertically centered. If you want the text vertically centered… in the middle of the screen… then say so, because there is nothing in your code that suggests that you do. If you want something else, a drawing might help.

Hi,
Then you need to use a property/value that will allow you to vertically align, such as inline-block.

Working from the example ronpat posted try these changes


<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/vertical-align-content-inside-slide-to-middle/277112
toolman
-->
    <style>
.carousel-inner {
    padding: 5% 0;
}
.item {
    text-align: center;
    z-index: 100;
    position: relative;
    color: #fff;
    padding: 10% 0;
    background:red; /*I couldn't see the white text*/
}
.item h1, .item h2 {     /*add this*/
    display: inline-block;
    vertical-align: middle;
}
h1 {
    font-size: 60px;
    font-weight: 700;
    font-family: "Raleway";
    font-weight: 700;
    text-transform: uppercase;
}
h2 {
    font-size: 22px;
    font-family: "Roboto";
    font-weight: 100;
}
    </style>
</head>
<body>

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <h1>Website Design</h1>
        <h2>Develop an online preence</h2>
    </div>
</div>


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