在屏幕尺寸上对齐图像和div

Question

我正在尝试设计我的第一个网站而且我无法将我的顶部条形css与我的徽标对齐，我感觉我做错了，因为取决于用户的屏幕尺寸固定高度的css值也会有所不同。

这就是我希望它在所有屏幕分辨率上看起来像：

这就是它在低屏幕上的样子：

下面是我的标记：

＆＃13;

＆＃13;

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  min-width: 100%;
  width: auto;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}

＆＃13;

<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

或者您可以在this online location

直播

Answer 1

问题是当你进入较小的屏幕时，你的logo图像会缩小。因为图片必须符合您在10% div。

上设置的.left宽度

现在，我不打算更改整个结构，但我建议您将50px的高度设置为.logo（图片周围的div）和background-color: #EEB84F。这是因为topbar设置了这些样式。

然后，您可以使用display {flex on logo

将logo img居中

请参阅下面的代码段或小提琴＆gt; jsFiddle

＆＃13;

＆＃13;

.logo  {
  min-height:50px;
  background:#EEB84F;
  display:flex;
  align-items:center;
}

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  min-width: 100%;
  width: auto;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}

＆＃13;

<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

作为建议，您应该将.topbar放在left和right div之外。并将徽标放入其中。

你的结构应该是

<div class="topbar">
    <div class="logo">
            <img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" />
    </div>
</div>
<div class="content">
    <div class="left">
    </div>
    <div class="right">
    </div>
</div>

也不确定为什么你需要那个left div，你可以轻松地制作gray部分，而不需要新的div（边框或伪元素等）

Answer 2

如果您希望徽标始终位于顶部而不重叠，则可以将该徽标图像的特定高度设置为大约height: 50px。否则，请使用媒体查询专门为较低分辨率设置其高度。

Answer 3

您只需要将.logo的高度与.topbar + padding的高度相同。然后在transform的中心使用.logo对齐图片，您可能需要在特定屏幕分辨率下使用媒体查询（如果需要）。

＆＃13;

＆＃13;

h1 {
  color: #111;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 45px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
  padding: 20px;
}

h2 {
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  margin: 0 0 72px;
  text-align: center;
}

p {
  color: #685206;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 24px;
  margin: 0 0 24px;
  text-align: justify;
  text-justify: inter-word;
}

html,
body {
  height: 100%;
  margin: 0;
  font-size: 20px;
}

.topbar {
  background-color: #EEB84F;
  width: 100%;
  height: 40px;
  padding: 5px;
  position: fixed;
}

.logo {
  width: 100%;
  height: 50px;
  background-color: #EEB84F;
}

.logo > img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-top: -50px;
}

.thumbwrapper {
  width: auto;
}

.thumb {
  background: white;
  float: left;
  margin: 20px;
}

.thumb {
  width: 121px;
  height: 174px;
}

.img {
  box-shadow: 10px 10px 5px #888888;
  max-width: 100%;
  width: 121px;
  height: 174px;
  border-radius: 6px;
}

.img:hover {
  box-shadow: 10px 10px 5px #666688;
  cursor: pointer;
}

.left {
  width: 10%;
  height: 100%;
  position: fixed;
  outline: 1px solid;
  background: #333;
}

.right {
  width: 90%;
  height: auto;
  outline: 0px solid;
  position: absolute;
  right: 0;
  background: #FFF;
}

＆＃13;

<div class="left">
  <div class="logo"><img src="http://d2tsz823kvlf97.cloudfront.net/static/logo2.png" width="100%" /></div>
</div>

<div class="right">
  <div class="topbar"></div>
  <h1>Latest Additions</h1>
  <div class="wrapper">
    <div class="thumbwrapper">
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AntiMatter_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DianaOurMotherHerLifeandLegacy_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ThePersianConnection_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/BloodHunt_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/UFConFoxWeidmanvsGastelum_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheOttomanLieutenant_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/NoWaytoLive_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/CopandaHalfNewRecruit_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheHorseDancer_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KillingGround_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DanceAcademyTheMovie_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Hypersomnia_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LostVegasHiway_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wildflower_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/KissandCry_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ForgottenEvil_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheMidwife_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AwakentheShadowman_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ShotCaller_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ViceroysHouse_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/StoryOfAGirl_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/JasperJones_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/AKindAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/LegoDCSuperHeroGirlsBrainDrain_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/DiaryofaWimpyKidTheLongHaul_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheChristmasCure_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/Wakefield_2016.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/ADeadlyAffair_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FatalDefense_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/TheArtofUs_2017.png" class="img"></div>
      <div class="thumb"><img src="http://d2tsz823kvlf97.cloudfront.net/FirstKill_2017.png" class="img"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;