CODEWITHSUNDEEP
htmlcssvertical-alignment
KevinCK
KevinCK

Reputation: 455

Align contents at the center with css

I am trying to create a google search look-alike, and while trying to arrange the contents at the center, I get them superimposed on each other. Is there a way to get them in an arranged format dropwise?

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Search</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <style> 
            .center {
 
               height: 100vh;
               position: relative;
    
            } 

           .center > div {
                margin: 0;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%) 
                }
         <style>

    </head>
    <body>
        <div class="container">
            <div class="links">
                <a href="googleImageSearch.html">Google Image Search</a>
                <a href="gooleAdvancedSearch.html">Google Advanced Search</a>
            </div>
            <br>
            <div class="center">
                <div class="logo">
                    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google" width="272" height="92">
                </div>
                <br>
                <div>
                    <form action="https://google.com/search">
                        <input type="text" name="q">
                        <div class="buttons">
                            <input type="submit" value="Google Search">
                            <input type="button" value="I'm Feeling Lucky">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 62

Answers (2)

Victor Santizo
Victor Santizo

Reputation: 1171

Try using flexbox, the align-items and justify-content properties will allow you to align content on the center. Then you will have to do some minor adjustments to the other elements.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  width: 100vw;
} 


form {
  diplay: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

input[type="text"] {
  border-radius: 2.5em;
  height: 2em;
  width: 500px;
  border: 1px solid black;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1em;
}

.buttons > * {
  margin-right: 0.85em;
}

Upvotes: 1

fernimontero_
fernimontero_

Reputation: 26

I suggest you :

.center{
   margin:0 auto;
 }

this should center your div in the center of page, if you want more space between the div and the top of the page Now that i see you have nested div with different style, so put the margin:0 auto; inside container class to center all your elements, and delete the position relative. or in the "center" class remove all and replace it with my code

Upvotes: 1

Related Questions