Question

我有两个列表，当屏幕尺寸变小时，我想移动它的位置。当屏幕长度达到327px时，我希望“headlogo”在屏幕上居中，其他一切都完全如此......我该怎么做？

<base href="http://XXX.XXX.ch">

@charset "utf-8";

/* CSS Document */

body {
  margin: 0;
  padding: 0;
  background-color: #DDDCDC;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding: 10px;
}
.secondlist {
  margin-top: 30px;
}
#headlogo {
  width: 80px;
  margin-left: 10px;
  margin-top: 10px;
}
.firstlist {
  position: relative;
  float: left;
}
.secondlist {
  position: absolute;
  right: 0;
  margin-right: 50px;
  margin-top: 50px;
  z-index: 2;
}
li#about {
  width: 5px;
}
@media only screen and (max-width: 610px) {
  .firstlist {
    position: relative;
    float: left;
  }
  .secondlist {
    position: relative;
    right: 0;
    margin-right: 50px;
    margin-top: 50px;
    z-index: 2;
    text-align: center;
  }
  li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  li.listli {
    line-height: 30px;
  }
  #headlogo {
    width: 80px;
    margin-left: 10px;
    margin-top: -22px;
  }
}
@media only screen and (max-width: 424px) {
  #headlogo {
    margin-top: -3px;
  }
}
@media only screen and (max-width: 394px) {
  #headlogo {
    margin-top: 7.5px;
  }
}
@media only screen and (max-width: 327px) {
  #centerme {
    display: inline-block;
    position: relative;
    top: 30px;
  }
  .firstlist {
    float: none;
    display: block;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  li.listli {
    position: relative;
    top: -10px;
  }
}

Answer 1

如果你只是横向居中，你必须在＆＃39; max-width：327px＆＃39;中编辑#center。查询以下内容：

#centerme {
    display: block;
    position: relative;
    top: 30px;
    width: 100%;
    text-align: center;
  }

我将#center div设为100％宽度并将text-align设置为center，这也会影响图像。这样，您可以水平居中图像。

或者，如果您将水平和垂直居中，可以使用：

#centerme {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(50%);
    -webkit-transform: translateY(50%);
    width: 100%;
    text-align: center;
}

使用上面相同的代码我添加了

top: 50%;
transform: translateY(50%);

将其水平居中。

古德勒克！

Answer 2

这应该将其置于327px以下;

@media (max-width: 327px){
    #headlogo{
         display: block;
         margin: 0 auto
    }
}

Check this out for more info

Answer 3

你可以做到

@media (max-width: 327){
   #headlogo{
    //with your code her//
   }
}

或者您可以使用添加了媒体的新css文件

<link rel="stylesheet" media="screen and (max-width: 327px)" href="small.css/>

如果你的屏幕是327px或更小，你可以使用这一行添加一个全新的CSS。

无法水平居中我的列表（包含图像）

3 个答案: