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

时间：2015-12-22 22:05:40

标签： css css3

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

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

我排除了@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>

1 个答案:

答案 0 :(得分：0)

您可以执行的一项操作是从标签中删除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>

相关问题
最新问题