How to align div class "gs" and div class "fl" in same line and in center-CodePudding

I am trying to design Google search page and facing some problems.

I have completed almost every thing but got stuck in aligning "Google Search" button and "I am feeling Lucky button" in line and in center below search bar.

Below is my HTML and CSS for entire layout.

body,a{
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  padding: 5px;
  margin: 5px;
  text-align: center;
}
.i{
  margin-left: auto;
  margin-right: auto;
  margin-top: 135px;
}

nav{
  text-align: right;
  padding-top: 5px;
}

.sb input{
  border-radius: 25px ;
  border: 0.5px solid ;
  height: 40px;
  width: 480px;
}


.foo{
  font-size: medium;
  padding-left: 40px;
  padding-right: 40px;
}

<nav>
  <div>
      <a href="image.html">Google Image Search </a>
      <a  href="advance.html">Advance Search</a>
  </div>
</nav>
<img src="image.png" >


<form action="https://google.com/search" >
  <div >
      <input type="text" name="q" >
  </div>
  <div >
      <input type="submit" value="Google Search">
  </div>
</form>
<div >
  <a href="https://www.google.com/doodles">
      <button>I am feeling lucky</button> 
  </a>
</div>

Here is my output: http://jsfiddle.net/zqwmogvd/#&togetherjs=Rd6Qeg60cd

CodePudding user response：

To align a div element with the class "gs" and a div element with the class "fl" on the same line and in the center, you can use the display and text-align CSS properties. Here's an example of how you could do it:

 <style>
.gs {
    display: inline-block;
    text-align: center;
}
.fl {
    display: inline-block;
    text-align: center;
}
</style>

<div >
    Content of div with class "gs"
</div>
<div >
    Content of div with class "fl"
</div>

This code uses the display property with the value inline-block to make the div elements appear on the same line. It also uses the text-align property with the value center to center the content of each div element. This will align the two div elements on the same line and center them.

CodePudding user response：

.button-wrap {
  display: flex;
  justify-content:center;
  margin-top:10px
}

CodePudding user response：

Here is how I would do it. I would wrap the two buttons in a parent div with a classname buttons-wrap or any class name of my choosing:


    <form action="https://google.com/search" >
      <div >
        <input type="text" name="q" >
      </div>
      <div >
        <div >
          <input type="submit" value="Google Search">
        </div>
        <div >
          <a href="https://www.google.com/doodles">
            <button>I am feeling lucky</button>
          </a>
        </div>
      </div>
    </form>

I would then reference the .buttons-wrap class in CSS and use flexbox to center it:

.buttons-wrap {
  display: flex;
  justify-content: center;
  margin-top: 3px;
}

If you don't know flexbox, you can also use the following:

.buttons-wrap>div {
  display: inline-block;
  margin-top: 3px
}

> selects the children elements.