如何在同一行和中心对齐 div 类 \"gs\" 和 div 类 \"fl\"答案

【问题标题】：How to align div class "gs" and div class "fl" in same line and in center如何在同一行和中心对齐 div 类 \"gs\" 和 div 类 \"fl\"
【发布时间】：2022-12-09 16:51:14
【问题描述】：

我正在尝试设计 Google 搜索页面并面临一些问题。

我已经完成了几乎所有的事情，但在对齐“谷歌搜索”按钮和“我感觉很幸运”按钮时陷入困境，并在搜索栏下方的中心对齐。

下面是我的整个布局的 HTML 和 CSS。

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


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

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;
}

这是我的输出：http://jsfiddle.net/zqwmogvd/#&togetherjs=Rd6Qeg60cd

【问题讨论】：

标签： javascript html

【解决方案1】：

要在同一行居中对齐类为“gs”的 div 元素和类为“fl”的 div 元素，您可以使用 display 和 text-align CSS 属性。这是您如何做到这一点的示例：

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

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

此代码使用值为 inline-block 的 display 属性使 div 元素出现在同一行上。它还使用值为 center 的 text-align 属性使每个 div 元素的内容居中。这会将两个 div 元素对齐在同一行上并将它们居中。

【讨论】：