Question

我需要做这样的事情。在div之间，我有两个按钮，总是位于交叉线的中间。顺便说一下，我需要在不同的设备上显示这个，所以我不能用

position: absolute

请帮助，谢谢！这是我的代码：

HTML

        <div class="login-back-up">
        </div>
        <div class="login-back-down">
          <p class="buttons-row hr-login-button-row">
            <a href="#" class="button">button1</a>
            <a href="#" class="button">button2</a>
          </p>
        </div>

CSS

.login-back-up{
width:100%;
height:80%
}
.login-back-down{
width:100%;
height:20%;
}

Answer 1

您有两种选择：

<强> 1。更改HTML和CSS （如果您正在编写页面，这是最佳选择）

让我们看看我们有什么：

＆＃13;

.login-back-up {
    width:100%;
    height:80%; /*You were missing ; at the end of this line*/
}
.login-back-down {
    width:100%;
    height:20%;
}

＆＃13;

<div class="login-back-up">
</div>
<div class="login-back-down">
    <p class="buttons-row hr-login-button-row">
        <a href="#" class="button">Button</a> <!--I change it to Button because that-->
        <a href="#" class="button">Button</a> <!--is on picture of example from OP-->
    </p>
</div>

＆＃13;

运行此代码时，您只需B̲u̲t̲t̲o̲n̲ B̲u̲t̲t̲o̲n̲。这是因为我们在CSS中定义宽度和高度时使用百分比（％），所以我将添加div标签并将所有HTML代码放入其中，我将指定该div的宽度和高度（使用像素值）。另外，我会在CSS中将background-color属性添加到.login-back-up和.login-back-down，以便我们可以看到它们。

＆＃13;

.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
}

＆＃13;

<div class="main">
  <div class="login-back-up">
  Div <!--I added this to match picture of example from OP-->
  </div>
  <div class="login-back-down">
      <p class="buttons-row hr-login-button-row">
          <a href="#" class="button">Button</a> <!--I change it to Button because that-->
          <a href="#" class="button">Button</a> <!--is on picture of example from OP-->
      </p>
      Div <!--I added this to match picture of example from OP-->
  </div>
</div>

＆＃13;

问题是div .login-back-up和.login-back-down之间有一个漏洞。这是因为div .login-back-down包含p标签，默认情况下有边距，所以我用div替换p标签。我还会设置按钮的样式（添加背景颜色，填充，边距，颜色和删除下划线），并将HTML中的颜色设置为白色（因为在此示例中所有文本都是白色）。

＆＃13;

body {
    color: white; /* text color is white*/
}
.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
}
.button {
    background-color: #4CAF50; /* this is some version of green*/
    text-decoration: none; /* this is to remove underlining*/
    color: white; /* text color is white*/
    padding: 10px 10px; /* this adds (green) space around text */
    margin: 0px 10px; /* this adds space around buttons */
}

＆＃13;

<div class="main">
  <div class="login-back-up">
  Div
  </div>
  <div class="login-back-down">
      <div class="buttons-row hr-login-button-row">
          <a href="#" class="button">Button</a> <!--I change it to Button because that-->
          <a href="#" class="button">Button</a> <!--is on picture of example from OP-->
      </div>
      Div
  </div>
</div>

＆＃13;

现在我们要定位按钮：将div .buttons-row hr-login-button-row放出div login-back-down和另一个（容器）div。容器div将位于div login-back-up和login-back-down之间，因此我们只需要将容器div的height设置为0。

＆＃13;

body {
    color: white; /* text color is white*/
}
.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
}
.button {
    background-color: #4CAF50; /* this is some version of green*/
    text-decoration: none; /* this is to remove underlining*/
    color: white; /* text color is white*/
    padding: 10px 10px; /* this adds (green) space around text */
    margin: 0px 10px; /* this adds space around buttons */
}
.container {
    height: 0px;
}

＆＃13;

<div class="main">
  <div class="login-back-up">
      Div
  </div>
  <div class="container">
      <div class="buttons-row hr-login-button-row">
          <a href="#" class="button">Button</a> <!--I change it to Button because that-->
          <a href="#" class="button">Button</a> <!--is on picture of example from OP-->
      </div>
  </div>
  <div class="login-back-down">
      Div
  </div>
</div>

＆＃13;

剩下的就是中心元素（文本和按钮）。我将使用display as flex来做到这一点。对于您想要居中的孩子的标签，您可以在CSS中添加display: flex;。此外，如果您想要将它们水平居中，请在CSS中添加justify-content: center;，如果您想将它们垂直居中，则添加align-items: center;

＆＃13;

body {
    color: white; /* text color is white*/
}
.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
}
.button {
    background-color: #4CAF50; /* this is some version of green*/
    text-decoration: none; /* this is to remove underlining*/
    color: white; /* text color is white*/
    padding: 10px 10px; /* this adds (green) space around text */
    margin: 0px 10px; /* this adds space around buttons */
}
.container {
    height: 0px;
    /* this is to align buttons in center */
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    height: 0px;
}
.login-back-up, .login-back-down{
    /* this is to align text in center,
    you don't have to use if you dont need
    text centered inside div */
    display: flex; 
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

＆＃13;

<div class="main">
  <div class="login-back-up">
      Div
  </div>
  <div class="container">
      <div class="buttons-row hr-login-button-row">
          <a href="#" class="button">Button</a> <!--I change it to Button because that-->
          <a href="#" class="button">Button</a> <!--is on picture of example from OP-->
      </div>
  </div>
  <div class="login-back-down">
      Div
  </div>
</div>

＆＃13;

<强> 2。仅更改CSS （仅当您无法更改HTML时才使用此选项）

我将从选项1中的第二个代码段开始。（其中一个添加了div main和background-color属性。

＆＃13;

.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
}

＆＃13;

<div class="main">
  <div class="login-back-up">
  </div>
  <div class="login-back-down">
      <p class="buttons-row hr-login-button-row">
          <a href="#" class="button">Button</a> <!--I change it to Button because that-->
          <a href="#" class="button">Button</a> <!--is on picture of example from OP-->
      </p>
  </div>
</div>

＆＃13;

首先，通过将{tag .login-back-up的{{1}}设置为.login-back-down，我可以删除div margin和buttons-row之间的漏洞。我还为选项1中的按钮添加样式，使用CSS将文本添加到div标签，并将正文中的文本颜色设置为白色。

＆＃13;

body {
    color: white; /* text color is white*/
}
.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
}
.buttons-row {
    margin: 0;
}
.button {
    background-color: #4CAF50; /* this is some version of green*/
    text-decoration: none; /* this is to remove underlining*/
    color: white; /* text color is white*/
    padding: 10px 10px; /* this adds (green) space around text */
    margin: 0px 10px; /* this adds space around buttons */
}
.login-back-up:after, .login-back-down:after {
    /* this is to add text to div, you
    don't have to use if you dont need
    text inside div */
    position: absolute; /* this is so text can be centered later*/
    content:'Div'; 
}

＆＃13;

现在我们需要将文本和按钮居中，但不需要更改HTML。我也可以通过在选项1中使用display as flex来实现这一点。

＆＃13;

<div class="main">
  <div class="login-back-up">
  </div>
  <div class="login-back-down">
      <p class="buttons-row hr-login-button-row">
          <a href="#" class="button">Button</a> <!--I change it to Button because that-->
          <a href="#" class="button">Button</a> <!--is on picture of example from OP-->
      </p>
  </div>
</div>

＆＃13;

body {
    color: white; /* text color is white*/
}
.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
    /* this is to align text in center,
    you don't have to use if you dont need
    text centered inside div */
    display: flex; 
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
    display: flex; /* this is to align both text and buttons in center */
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.buttons-row {
    margin: 0;
}
.button {
    background-color: #4CAF50; /* this is some version of green*/
    text-decoration: none; /* this is to remove underlining*/
    color: white; /* text color is white*/
    padding: 10px 10px; /* this adds (green) space around text */
    margin: 0px 10px; /* this adds space around buttons */
}
.login-back-up:after, .login-back-down:after {
    /* this is to add text to div, you
    don't have to use if you dont need
    text inside div */
    position: absolute; /* this is so text can be centered later*/
    content:'Div'; 
}

＆＃13;

唯一的问题是按钮位于<div class="main"> <div class="login-back-up"> </div> <div class="login-back-down"> <p class="buttons-row hr-login-button-row"> <a href="#" class="button">Button</a>  <a href="#" class="button">Button</a>  </p> </div> </div> div的中心位置，但我们会通过向.login-back-down添加负顶值来解决这个问题。

＆＃13;

.buttons-row

＆＃13;

body {
    color: white; /* text color is white*/
}
.main {
    width: 200px;
    height: 340px;
}
.login-back-up {
    width:100%;
    height:80%;
    background-color: #00A1FF;
    /* this is to align text in center,
    you don't have to use if you dont need
    text centered inside div */
    display: flex; 
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.login-back-down {
    width:100%;
    height:20%;
    background-color: #F9BA00;
    display: flex; /* this is to align both text and buttons in center */
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}
.buttons-row {
    margin: 0;
}
.button {
    background-color: #4CAF50; /* this is some version of green*/
    text-decoration: none; /* this is to remove underlining*/
    color: white; /* text color is white*/
    padding: 10px 10px; /* this adds (green) space around text */
    margin: 0px 10px; /* this adds space around buttons */
}
.login-back-up:after, .login-back-down:after {
    /* this is to add text to div, you
    don't have to use if you dont need
    text inside div */
    position: absolute; /* this is so text can be centered later*/
    content:'Div'; 
}
.buttons-row {
    position: relative;
    top: -50%;
}

＆＃13;

Answer 2

import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; import 'rxjs/add/operator/map'; import { Headers,RequestOptions } from '@angular/http'; import { Observable } from 'rxjs'; import { Platform } from 'ionic-angular'; @Injectable() export class myMobileDataService { constructor(private http: Http, private platform: Platform) {} public checkAuthorization( _enterpriseID: string, _token : any ) : Observable<any>{ let details = { "EntId" : "_enterpriseID" }; let body = JSON.stringify(details); let headers = new Headers( { 'Content-Type': 'application/json', 'Authorization' : 'bearer ' + _token } ); let options = new RequestOptions({headers:headers}); return this.http.post('myURL',body,options) .map( (res) => res.json()) } }可能是最简单的方式：

＆＃13;

ReportDtDataForMAPP:[
{
  "MainReport": "AAA",
  "SubReport": "aaa",
   "URL": "https://aaa@aaa.com"
},
{
  "MainReport": "BBB",
  "SubReport": "bbb",
   "URL": "https://bbb@bbb.com"
},
{
  "MainReport": "CCC",
  "SubReport": "ccc",
   "URL": "https://ccc@ccc.com"
}


 ]

＆＃13;

line-height

＆＃13;

Answer 3

您可以添加`postion: absolute`并仍在各种设备上显示。

#divs {
  position: relative;
}

#divs>div {
  width: 100vw;
  height: 70vh;
  color: white;
  text-align: center;
}

#div-a {
  background: #03A9F4;
}

#div-b {
  background: #FFCA28;
}

#buttons {
  position: absolute;
  width: 80vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -75vh 10vw 0 10vw;
}

#buttons>button {
  width: 100px;
  height: 50px;
  background: #69F0AE;
  color: white;
  border: none;
  font-size: 15px;
  margin-left: 10vw;
  margin-right: 10vw;
}

<div id="divs">
  <div id="div-a">Div</div>
  <div id="div-b">Div</div>
</div>
<div id="buttons">
  <button id="button-a">Button 1</button>
  <button id="button-b">Button 2</button>
</div>

如何在两个div之间放置元素（CSS，HTML）

3 个答案:

您可以添加`postion: absolute`并仍在各种设备上显示。

如何在两个div之间放置元素（CSS，HTML）

3 个答案:

您可以添加postion: absolute并仍在各种设备上显示。

您可以添加`postion: absolute`并仍在各种设备上显示。