HTML 和 CSS：如何使两个内联表单按钮居中？答案

【问题标题】：HTML and CSS: how to center two inline form buttons?HTML 和 CSS：如何使两个内联表单按钮居中？
【发布时间】：2021-09-06 14:44:38
【问题描述】：

我是 HTML 和 CSS 的新手。我正在尝试将两个表单按钮居中。这是我的代码：

* {
  font-family: arial, sans-serif;
}

body {
  display: flex;
  align-items: column;
}

.buttons {
  background-color: #f8f9fa;
  border: 1px solid #f8f9fa;
  border-radius: 4px;
  font-size: 14px;
  margin: 11px 4px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  display: inline-block;
}

.search_area {
  display: flex;
  color: rgba(0, 0, 0, .87);
  border: 1px solid #ddd;
  width: 100%;
  height: 34px;
  font-size: 16px;
  border-radius: 25px;
}

nav {
  display: flex;
  margin-right: 30px;
  margin-top: 15px;
}

.search_box {
  text-align: center;
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Google</title>
  <link rel="stylesheet" href="google.css">
</head>

<body>
  <nav>
    <a href="images.html">Image Search</a>
    <a href="advanced.html">Advanced Search</a>
  </nav>

  <form class="search" action="https://www.google.com/search">
    <img id="logo" src="logo.png" alt="Google logo">
    <div>
      <input name="q" type="text" class="search_area">
    </div>
    <input type="submit" value="Search Google" class="buttons">
    <input type="submit" value="I'm Feeling Lucky" class="buttons">
  </form>
</body>

</html>

如您所见，搜索栏下方的两个按钮向左对齐。我认为text-align: center 是解决方案。但是，这似乎不起作用。

如何让这两个按钮在屏幕上居中？

提前致谢！

【问题讨论】：

标签： html css flexbox css-selectors

【解决方案1】：

在你的 body 标签中不要使用 display: flex 因为当你使用 display flex 时 text-align: center 将不起作用。在您的 form 标记中，您有一个 .search 类。为了居中，我使用了 .search { margin: 0 auto;宽度：50%}

这是 HTML 代码：

  <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Google</title>
            <link rel="stylesheet" href="google.css">
    
        </head>
    
        <body>
            <nav>
                <a href="images.html">Image Search</a>
                <a href="advanced.html">Advanced Search</a>
            </nav>
    
            <form class="search" action="https://www.google.com/search">
                <img id="logo" src="logo.png" alt="Google logo">
                <div>
                    <input name="q" type="text" class="search_area">
                </div>
    
                <div class="button">
                    <input type="submit" value="Search Google" class="buttons">
                    <input type="submit" value="I'm Feeling Lucky" class="buttons">         
                </div>      
            </form>
        </body>
    </html>

这里是 Css：

*{
    font-family: arial, sans-serif;
}

/* body{display: flex;align-items: column;}  */

.buttons {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

.button{
    text-align: center;
}


.search_area {
    color: rgba(0, 0, 0, .87);
    border: 1px solid #ddd;
    width: 100%;
    height: 34px;
    font-size: 16px;
    border-radius: 25px;
}

.search{
    margin: 0 auto;
    width: 50%;
}

nav {
    display: flex;
    margin-right: 30px;
    margin-top: 15px;
}

.search_box {
    text-align: center;
    display: block;
}

【讨论】：

【解决方案2】：

使用这个 CSS 代码：

只需粘贴它并查看更改。

我已经评论了正文部分并且它有效。

*{
    font-family: arial, sans-serif;
}

body {
    /*display: flex;
    align-items: column;*/  /*I have commented the body CSS lines*/
}

.buttons {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}


.search_area {
    display: flex;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #ddd;
    width: 100%;
    height: 34px;
    font-size: 16px;
    border-radius: 25px;
}

nav {
    display: flex;
    margin-right: 30px;
    margin-top: 15px;
}

form{
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.search_box {
    text-align: center;
    display: block;
}

【讨论】：

一个好的答案不仅仅依赖于代码。您应该解释您所做的不同之处以及它如何解决问题。在代码中使用 cmets 突出显示更改

【解决方案3】：

更新示例：

<html lang="en"><head>
                        <title>Google</title>
                        <link rel="stylesheet" href="google.css">
                    </head>

                    <body>
                        <nav>
                            <a href="images.html">Image Search</a>
                            <a href="advanced.html">Advanced Search</a>
                        </nav>

                        <form class="search" action="https://www.google.com/search">
                            <div style="
                "><img id="logo" src="logo.png" alt="Google logo" style=""></div>
                    <div style="">
                            <div style="display: flex;align-content: center;">
                                <input name="q" type="text" class="search_area">
                            </div>
                    <div style="">
                                <input type="submit" value="Search Google" class="buttons">
                                <input type="submit" value="I'm Feeling Lucky" class="buttons">               
                        </div>
                    </div>
                </form>
                    
                </body></html>

CSS：

*{
                    font-family: arial, sans-serif;
                }

                body {
                    /*display: flex;
                    align-items: column;*/
                }

                .buttons {
                    background-color: #f8f9fa;
                    border: 1px solid #f8f9fa;
                    border-radius: 4px;
                    font-size: 14px;
                    margin: 11px 4px;
                    padding: 0 16px;
                    line-height: 27px;
                    height: 36px;
                    min-width: 54px;
                    text-align: center;
                    cursor: pointer;
                    user-select: none;
                    display: inline-block;
                }


                .search_area {
                    display: flex;
                    color: rgba(0, 0, 0, .87);
                    border: 1px solid #ddd;
                    width: 100%;
                    height: 34px;
                    font-size: 16px;
                    border-radius: 25px;
                }

                nav {
                    display: flex;
                    margin-right: 30px;
                    margin-top: 15px;
                }

                form{
                    display: table;
                    margin-left: auto;
                    margin-right: auto;
                }

                .search_box {
                    text-align: center;
                    display: block;
                }

【讨论】：

一个好的答案不仅仅依赖于代码。您应该解释您所做的不同之处以及它如何解决问题。在代码中使用 cmets 突出显示更改