Question

我删除了很多代码，因此以下是最低限度。

如何将下面的文本对齐为垂直/水平居中并在响应时自动调整？

我排除了@media css。但是如果不改变我所拥有的东西，有没有办法使文本即使在碰到两行甚至三行时也会居中？

当你在下面编写代码片段时，请注意选项1和选项2不是居中的。

我离开了JS，所以你可以看到我在做什么，它只是一个导航。

//Make first one active
$(".tabs > li ").first().addClass("activeTab");

$(".tabs > li").click(function(e) {

  $(".activeTab ").removeClass("activeTab");

  var _this = $(this);
  _this.addClass("activeTab");
});

.tabs_accordion {
  display: block;
  margin: 0 auto;
  max-width: 1200px;
}
.tabs_accordion > input {
  display: none;
}
.tabs_accordion ul.tabs {
  display: table;
  width: 100%;
  display: none;
  background-color: green;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  color: #7EE8FF;
  font-size: 16px;
}
.tabs_accordion ul.tabs li {
  display: table-cell;
  cursor: pointer;
  width: 238px;
  position: relative;
}
.tabs_accordion ul.tabs li label:active {
  background-color: blue;
}
.tabs_accordion ul.tabs li label {
  display: block;
  height: 74px;
  padding: 20px;
  text-align: center;
  border-left: 2px solid yellow;
  margin: 0px 0;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: bold;
}
.tabs_accordion ul.tabs li label:focus {
  background-color: blue;
}
.tabs_accordion ul.tabs li label:active {
  background-color: blue;
}
.tabs_accordion ul.tabs li:hover {
  background-color: blue;
  color: #FFFFFF;
}
.tabs_accordion div.content > label {
  display: block;
  background-color: green;
  padding: 20px;
  margin-bottom: 1em;
  cursor: pointer;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}
.tabs_accordion div.content > div {
  display: none;
  padding: 10px;
  margin-bottom: 1em;
}
.tabs_accordion ul.tabs {
  display: table;
}
.tabs_accordion div.content > label {
  display: none;
}
.tabs_accordion div.content > div {
  margin-bottom: 0;
}
/* For Java */

/* ARROW Controls */

Controls Active .tabs_accordion [id^="tab"]:checked + label {
  background: blue;
  color: #fff;
}
.activeTab {
  background-color: blue;
}
.tabs_accordion ul.tabs li label:after {
  content: '';
  width: 0;
  height: 0;
  top: 74px;
  left: 50%;
  bottom: 0;
  margin-left: -20px;
  border-color: blue transparent transparent transparent;
  border-style: solid;
  position: absolute;
  border-width: 20px;
  display: none;
}
.tabs_accordion ul.tabs li:hover label:after,
.tabs_accordion ul.tabs li.activeTab label:after {
  display: block;
}
.tabs_accordion ul.tabs li:hover label {
  border-left-color: transparent;
}
.tabs_accordion ul.tabs li:hover + li > label {
  border-left-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="tabs_accordion">
  <input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" />
  <input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" />
  <input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" />

  <ul class="tabs">
    <li>
      <label for="tab_1_content_control">Option 1</label>
    </li>
    <li>
      <label for="tab_2_content_control">Option two</label>
    </li>
    <li>
      <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label>
    </li>
  </ul>
  <div class="content">

    <label for="tab_1_content_control">Option 1</label>
    <label for="tab_2_content_control">Option two</label>
    <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label>

  </div>
</div>

Answer 1

您可以执行的一项操作是从标签中删除padding，并使line-height与标签的height相同。

这是在你的情况下只有一行文字时可以使用的技巧之一。

<强>代码：

.tabs_accordion ul.tabs li label {
      display: block;
      height: 74px;
      line-height:74px;
      text-align: center;
      border-left: 2px solid yellow;
      margin: 0px 0;
      box-sizing: border-box;
      cursor: pointer;
      font-weight: bold;
 }

示例：

//Make first one active $(".tabs > li ").first().addClass("activeTab"); $(".tabs > li").click(function(e) { $(".activeTab ").removeClass("activeTab"); var _this = $(this); _this.addClass("activeTab"); });

.tabs_accordion { display: block; margin: 0 auto; max-width: 1200px; } .tabs_accordion > input { display: none; } .tabs_accordion ul.tabs { display: table; width: 100%; display: none; background-color: green; padding: 0; margin: 0; box-sizing: border-box; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; color: #7EE8FF; font-size: 16px; } .tabs_accordion ul.tabs li { display: table-cell; cursor: pointer; width: 238px; position: relative; } .tabs_accordion ul.tabs li label:active { background-color: blue; } .tabs_accordion ul.tabs li label { display: block; height: 74px; line-height:74px; text-align: center; border-left: 2px solid yellow; margin: 0px 0; box-sizing: border-box; cursor: pointer; font-weight: bold; } .tabs_accordion ul.tabs li label:focus { background-color: blue; } .tabs_accordion ul.tabs li label:active { background-color: blue; } .tabs_accordion ul.tabs li:hover { background-color: blue; color: #FFFFFF; } .tabs_accordion div.content > label { display: block; background-color: green; padding: 20px; margin-bottom: 1em; cursor: pointer; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; text-align: center; } .tabs_accordion div.content > div { display: none; padding: 10px; margin-bottom: 1em; } .tabs_accordion ul.tabs { display: table; } .tabs_accordion div.content > label { display: none; } .tabs_accordion div.content > div { margin-bottom: 0; } /* For Java */ /* ARROW Controls */ Controls Active .tabs_accordion [id^="tab"]:checked + label { background: blue; color: #fff; } .activeTab { background-color: blue; } .tabs_accordion ul.tabs li label:after { content: ''; width: 0; height: 0; top: 74px; left: 50%; bottom: 0; margin-left: -20px; border-color: blue transparent transparent transparent; border-style: solid; position: absolute; border-width: 20px; display: none; } .tabs_accordion ul.tabs li:hover label:after, .tabs_accordion ul.tabs li.activeTab label:after { display: block; } .tabs_accordion ul.tabs li:hover label { border-left-color: transparent; } .tabs_accordion ul.tabs li:hover + li > label { border-left-color: transparent; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="tabs_accordion"> <input type="radio" name="tabs" value="tab_1" id="tab_1_content_control" checked="checked" tabindex="0" /> <input type="radio" name="tabs" value="tab_2" id="tab_2_content_control" tabindex="0" /> <input type="radio" name="tabs" value="tab_3" id="tab_3_content_control" tabindex="0" /> <ul class="tabs"> <li> <label for="tab_1_content_control">Option 1</label> </li> <li> <label for="tab_2_content_control">Option two</label> </li> <li> <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label> </li> </ul> <div class="content"> <label for="tab_1_content_control">Option 1</label> <label for="tab_2_content_control">Option two</label> <label for="tab_3_content_control">Optionofand optionss shdfkshdkfh</label> </div> </div>

垂直居中对齐文字以便回复

1 个答案: