CODEWITHSUNDEEP
cssalignment
Krasen Vachev
Krasen Vachev

Reputation: 61

CSS text under horizontal/vertical alignment

So, I have a page with a text that's centered horizontally and vertically. What I want to do is put normal text under that centered text. Here's my code so far.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title>Block4o</title>
</head>

<body scroll="no" style="overflow: hidden">

<h1>Block4o</h1>                         
Normal text should be here (links etc.)
</body>
</html>

<style>
body 
{
	background-image: url("/background.jpg");
	background-repeat:no-repeat;
	-webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover;
	background-position:center;
}

h1 
{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border:solid;
	border-size: 8px;
	border-radius: 10px;
}

</style>

enter image description here Here's an example of what I need visually. Any help is appreciated.

Upvotes: 0

Views: 43

Answers (2)

Jaqen H&#39;ghar
Jaqen H&#39;ghar

Reputation: 16804

Hope it helps:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title>Block4o</title>
<style>
    body {
        background-image: url("/background.jpg");
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center;
    }

    h1 {
        text-align: center;
        border: solid;
        border-size: 8px;
        border-radius: 10px;
    }

    div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
</head>
<body scroll="no" style="overflow: hidden">

<div>
    <h1>Block4o</h1>
    Normal text should be here (links etc.)
</div>

</body>
</html>

Upvotes: 1

Sebastian Witeczek
Sebastian Witeczek

Reputation: 133

Something like this?

.main{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

h1{
  border:solid;
	border-size: 8px;
	border-radius: 10px;
}
<div class="main">
  <h1>Block4o</h1>    
  Normal text should be here (links etc.)
</div>

Upvotes: 1

Related Questions