2

Explanation

In order to, for testing purpose, recreate (not exactly) this site's style, is this code below the right approach? I mean, would it be the common/best way to do it?

Sorry if it's to simple for a question, but it's because I found a lot of templates using display, position, top, left, etc, that, as I'm new to web dev, I guess I'm probably doing something wrong - since I used a few lines to do it.

ps: I didn't use text-align: center because I'm using Bootstrap's text-center class, which, I think, does the same.

Code

body {
    background-color: #2098D1 !important;
}

h1, p {
    color: white !important;
}

.site-wrapper {
    margin-top: 230px;
}

.site-wrapper p {
    margin-top: 15px;
}
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>Example</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>

    <div class="site-wrapper text-center">
        <h1>Responsive Front-end Development</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>

</body>

</html>

Thanks in advance,
Luiz.

Luiz
  • 1,275
  • 4
  • 19
  • 35

2 Answers2

0

If what you are asking is how you can vertically center content in a div, you can use display: flex;

Try this:

.site-wrapper {
     height: 75%;
     display: flex;
     align-items: center; /*Horizontally centers content*/
     justify-content: center; /*Vertically centers content*/
     flex-direction: column; /* Makes content in div to flow under instead of side by side*/
 }
FarFar
  • 141
  • 1
  • 12
0

The div element is a block element, therefore if you want to centering it horizontally simplest way is using margin auto method.

.site-wrapper{
 width:1200px; //you have to give specific width value
 margin: 0 auto;}
Orhan Bülbül
  • 1
  • 1