小编Min*_*han的帖子

选择每个第一个和第四个(最后一个)div

如何使用选择器选择每个第一个和第四个div以:nth-child向其添加特定样式？

.main{
  width:460px;
  height:240px;
}
.box{
  width:100px;
  height:100px;
  background:red;
  float:left;
  margin:10px;
}

/*I tried */

.box:nth-child(n+4),.box:first-child{
  margin:10px 10px 10px 0;
}

.box:nth-child(4n){
  margin:10px 0px 10px 10px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="main">
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
</div>

Run Code Online (Sandbox Code Playgroud)

第二个代码有效,但我遇到第一个问题？

如何选择行中的每个第一个和最后一个 div(行包含四个div)？

JSFiddle.

html css css-selectors css3

Vuc*_*cko

2016 12-14

0
推荐指数

2
解决办法

2942
查看次数

如何使列表项垂直居中？

我坚持使用这段代码.

.hwrap header .h-position {
   top: 0;
   left: 0;
   bottom: 0;
   width: 135px;
   position: fixed;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

Run Code Online (Sandbox Code Playgroud)

这三个元素应垂直居中(如图所示)

整个代码

html css sass

jsj*_*sjs

2018 05-11

0
推荐指数

1
解决办法

65
查看次数

HTML和CSS - 网站中的中心图像

我试图将图像居中,但它不起作用:(

我使用参数text-align:center;.图像的大小是600x600px,我需要在网站中居中.

我的代码是:

#share-buttons img {
  width: 50px;
  padding: 5px;
  border: 0;
  box-shadow: 0;
  display: inline;
}
.img-sugar{
  width: 600px;
  height: 600px;
  display: block;
  margin: 0 auto
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">

<div class="container-fluid">
  <div class="row">

    <div class="col-md-12 text-center">
      <img class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
    </div>

  </div>

  <div class="row">

    <div class="col-md-12 text-center">
      <form action="shareimage.php" method="post">
        <input class="" type="file" accept="image/*" capture="camera"/>
      </form>
    </div>

  </div>

  <div class="row" id="share-buttons">

    <div class="col-md-12 text-center">
      <!-- Facebook -->
      <a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
        <img …

Run Code Online (Sandbox Code Playgroud)

html css

ruz*_*uzD

2016 11-17

-2
推荐指数

1
解决办法

115
查看次数

HTML CSS中心按钮

我的页面上的按钮居中有些麻烦.

HTML码

.banner {
  background-color: #101723;
  width: 100%;
  padding: 50px 0;
}

.button {
  display: inline-block;
  width: 20%;
  margin: auto;
  padding: 16px 0;
  text-transform: uppercase;
  vertical-align: middle;
  border: 3px solid #FFFFFF;
  color: #FFFFFF;	
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}

Run Code Online (Sandbox Code Playgroud)

<section class="banner">
  <a href="" target="_blank"><div class="button">BUTTON 1</div></a> 
  <a href="" target="_blank"><div class="button">BUTTON 2</div></a>
  <a href="" target="_blank"><div class="button">BUTTON 3</div></a>
</section>

Run Code Online (Sandbox Code Playgroud)

3个按钮应位于容器中心.我尝试了一切,但似乎我错过了一些东西.

html css

Dom*_*nik

2017 10-26

-2
推荐指数

1
解决办法

95
查看次数