Question

我正在尝试在HTML屏幕中间对齐两个按钮。当我尝试使用text-align: center;时，它无效。下面是我的按钮代码。

<style>

.button {
      margin-top: 15px;
      background-color: #0066FF;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
 }

 <body>

 <div class="floated run">
 <form action="aboutus.html">
 <button class="button">See Projects</button>
 </form>
 </div>

 <div class="floated run">
 <form action="end.html">
 <button class="button">About Us</button>
 </form>
 </div>

 </body>

我知道这个问题有多个答案，但到目前为止他们都没有帮助过我。

Answer 1

您可以使用Flexbox获取您的功能，并略微更改您的标记。

因此，您需要一个包含.flex类的包装器和包含.flex-item类的子包。

＆＃13;

.flex {
  display: flex;
  justify-content: center;
}

.flex-item + .flex-item {
  margin-left: 10px;
}

.button {
  margin-top: 15px;
  background-color: #0066FF;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

＆＃13;

<div class="flex">
  <form action="aboutus.html" class="flex-item">
    <button class="button">See Projects</button>
  </form>

  <form action="end.html" class="flex-item">
    <button class="button">About Us</button>
  </form>
</div>

＆＃13;

Answer 2

这里的解决方案是因为你有div和表格内的按钮，你直接应用于按钮的任何CSS都不起作用 - 你需要先放置div：

https://jsfiddle.net/o2gxgz9r/6967/

这个例子的本质是这个CSS：

class ResultsController < ApplicationController
  helper_method :sortable

  def sort_column
    params[:sort] != nil ? params[:sort] : 'ID'
  end

  def sortable(column, title = nil)
    title ||= column
    css_class = column == sort_column ? "current #{sort_direction}" : nil
    direction = column == sort_column && sort_direction == "asc" ? "desc" : "asc"
    sort_arrow = ""
    if(column == sort_column)
      if(direction == "desc")
        sort_arrow = "▼"
      elsif(direction == "asc")
        sort_arrow = "▲"
      end
    end
    link_to sort_arrow + title,
            {:sort => column, :direction => direction,
             :search_form => @search_form.attributes},
            {:class => css_class}

  end
end

使用此HTML：

.floated {
  width: 48%;
  float: left;
  padding: 1%;
}

.first {
  text-align: right;
}

请注意，我已在第一个div中添加了一个类<div class="floated run first"> <form action="aboutus.html"> <button class="button">See Projects</button> </form> </div> <div class="floated run"> <form action="end.html"> <button class="button">About Us</button> </form> </div>。

Answer 3

你可以将按钮向左浮动，添加一点左边距，用一个div包裹它，然后将它放在中心位置：

＆＃13;

<style>

    .button {
          margin-top: 15px;
          margin-left: 10px;
          background-color: #0066FF;
          border: none;
          color: white;
          padding: 10px 20px;
          text-align: center;
          text-decoration: none;
          float: left;
          font-size: 16px;
          cursor: pointer;
     }

     .button-wrapper{
          width: 55%;
          margin: 0 auto;
     }

 </style>
     <body>
     <div class="button-wrapper">
     <div class="floated run">
     <form action="aboutus.html">
     <button class="button">See Projects</button>
     </form>
     </div>

     <div class="floated run">
     <form action="end.html">
     <button class="button">About Us</button>
     </form>
     </div>
     </div>
     </body>

＆＃13;

Answer 4

易

给出div.floated宽度：100％和text-align：center

检查 -

div.floated {
  width:100%;
  text-align:center;
}

如何在html中将中间的两个按钮与一定边距对齐

4 个答案: