Question

我有以下内容：

List<RadButton>

我希望它看起来像这样：

var button = (RadButton)sender;
var index = list.IndexOf(button);

请记住div的大小是动态的。

我怎样才能做到这一点？我试过flex，但没有做到这一点。固定利润也不好。

Answer 1

您应该使用按钮上的按钮position:absolute;上的position:relative;。见这个例子：

div{
    position:relative;
  height:180px;
  background-color:green;
    }
    
button{
    position:absolute;
    top:calc(50% - 15px);
    left:calc(50% - 50px);
    height:30px;
    width:100px;
}

<div>
<p>
  lines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of textlines of text
</p>
<button>Click me</button>
</div>

Answer 2

您可以使用 css3 flexbox 概念

html,body{
  height:100%;
  width:100%;
  }
.wrapper {
           display:flex;
  justify-content:center;
           width:100%;
           height:100%;
           background-image: url("https://i.stack.imgur.com/wwy2w.jpg");
           background-repeat:no-repeat;
           background-size:cover;
           
     }

    .button {
     position:absolute;
      align-self:center;
    }
p{
  color:white;
  }

<div class="wrapper">
   <p> other texts</p>
        <button class="button">Button</button>
    </div>

Answer 3

你可以试试这个：

外部div设置为position: relative;

对于可以设置mid的div，使用以下css创建一个类：

.center {
   position: absolute;
   margin: auto;
   top: 0; bottom: 0;
   left: 0; right: 0;
 }

Answer 4

您可以使用display: block＆amp; margin: 0 auto，如：

button {
  display: block;
  margin: 20px auto;
  font-size: 20px;
}

请看下面的代码段：

＆＃13;

button {
  display: block;
  margin: 20px auto;
  font-size: 20px;
}

＆＃13;

<div class="content-holder">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, consectetur, saepe. Praesentium doloribus dolorum qui nisi rem veniam iure. Ducimus, harum, molestiae. Harum consequatur cum accusantium fugiat, reiciendis repudiandae iste!
  <button>Button</button>
</div>

＆＃13;

希望这有帮助！

Answer 5

有很多方法可以执行此操作，但您可以使用text-align:center;或margin:0 auto;执行此操作请参阅下面的代码段

＆＃13;

html,body{
  height:100%;
  width:100%;
  background-image:url("https://th3rdculture.files.wordpress.com/2011/06/dark-forest-35836-240944.jpg");
  background-size:cover;
  margin:0;
}
.wrapper {
  float:left;
  width:100%;
  text-align:center;
}
p{
  color:#fff;
}
button {
  display:block;
  margin:0 auto;
}

＆＃13;

<body>
<div class="wrapper">
    <p> some texts here </p>
    <p> other texts here other texts here other texts here  </p>
    <button class="button">Button</button>
</div>
</body>

＆＃13;

或者您希望文本左侧和按钮仅居中使用text-align:left

＆＃13;

html,body{
  height:100%;
  width:100%;
  background-image:url("https://th3rdculture.files.wordpress.com/2011/06/dark-forest-35836-240944.jpg");
  background-size:cover;
  margin:0;
}
.wrapper {
  float:left;
  width:100%;
  text-align:left;
}
p{
  color:#fff;
}
button {
  display:block;
  margin:0 auto;
}

＆＃13;

<body>
<div class="wrapper">
    <p> some texts here </p>
    <p> other texts here other texts here other texts here  </p>
    <button class="button">Button</button>
</div>
</body>

＆＃13;

Answer 6

wrapper{
display: flex;
justify-content : center;
}

或

wrapper{
position : relative;
}
.button{
position: absolute;
top : 50%;
left : 50%;
}

div中的中心按钮，忽略其他元素

6 个答案: