Question

我使用以下代码来居中我的图像并格式化我的文字。

IMG.center {position:fixed; top:40%; left:50%; transform:translate(-50%,-50%)}

h1 span {display: block;}

h1 span.major {font-family:Avenir Lt Std; font-size:30px; font-weight:bold; border:0px solid black; padding:0px; text-align: center;}

h1 span.minor {font-family:Avenir Lt Std; font-size:20px; border:0px solid black; padding:0px; text-align: center;}

并显示元素。但是，文本会一直浮动到页面顶部。

<body>

<IMG class="center" src="picture.png" alt="icon" style="width:596px;height:166px;"> 

<h1>
    <span class="major">some text</span>
    <br>
    <span class="minor">some text</span>
</h1>
</body>

为什么文字漂浮在顶部？以及如何移动图像下方的文字？关键是首先使图像居中并相对于图像打印文本（即下面）。

＆＃13;

IMG.center {position:fixed; top:40%; left:50%; transform:translate(-50%,-50%)}

h1 span {display: block;}

h1 span.major {font-family:Avenir Lt Std; font-size:30px; font-weight:bold; border:0px solid black; padding:0px; text-align: center;}

h1 span.minor {font-family:Avenir Lt Std; font-size:20px; border:0px solid black; padding:0px; text-align: center;}

＆＃13;

<IMG class="center" src="picture.png" alt="icon" style="width:596px;height:166px;" /> 

<h1>
    <span class="major">some text</span>
    <br>
    <span class="minor">some text</span>
</h1>

＆＃13;

Answer 1

让position:fixed使图像相对于浏览器窗口而不是页面上的其他元素，并将其从＆＃34; flow＆＃34;中删除。的页面。从h1的角度来看，img位于流量的单独/位置，h1位于页面顶部。

您可以在其他元素上设置position:fixed并对齐它，但这里有一个您可能更喜欢的简单方法（在margin上设置左右display:block）：

HTML：

<div class="center-text">
    <img class="center" src="https://jsfiddle.net/img/logo.png" alt="logo" />
    <p>Caption</p>
</div>

CSS：

.center-text {
    text-align:center;
}
img.center {
    display:block;
    margin:auto;
    background-color:blue
}

https://jsfiddle.net/mw6djz8n/

（注意：如果您想使用上边距或下边距，则可能需要将margin:auto换成margin-left:auto;margin-right:auto

有关CSS position的更多信息：

w3schools，learnlayout，MDN，Codecademy Lesson

Answer 2

使用flexbox将元素居中，使用min-content构建元素框架。我在body（101vh）和main（101%）上创造了高度，因为它使iOS8中的滚动更加顺畅。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>CENTERED</title>
</head>

<body>
  

  <style>
    html {
      font: 500 16px/1.5 'Avenir Lt Std';
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    body {
      height: 101vh;
      width: 100vw;
      background: #111;
      color: #DDD;
    }
    
    main {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      height: 101%;
      width: 100%;
    }
    
    .center {
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      align-items: center;
      align-content: center;
      self-align: center;
      border: 3px double white;
      flex 0 0 100%;
      margin: 50% auto;
    }
    
    .center > * {
      flex: 1 1 100%;
    }
    
    .frame {
      border-bottom: 2px solid yellow;
      background: #222;
      margin: 0;
      width: -moz-min-content;
      width: -webkit-min-content;
      width: min-content;
    }
    
    .title {
      font-size: 2rem;
      font-weight: bolder;
      border: 1px solid brown;
      padding: 1px;
      font-variant: small-caps;
      margin: 0 auto;
    }
    
    .desc {
      font-size: 1.5rem;
      border: 1px solid grey;
      padding: 3px 1px;
      text-align: center;
      margin: 0 auto;
    }
    
    .caption {
      text-align: center;
      font-size: 1.2rem;
    }
    
    img {
      display: table;
      border: 1px solid yellow;
    }

  </style>
  
  <main>
    <figure class="center frame"> <img src="http://placehold.it/569x166/000/fff.png&text=This+is+the+Picture"
      alt="icon" style="width:596px;height:166px;" />
      <figcaption class="caption">
        <h3 class="title">This is the Title</h3>
        <p class="desc">This is the description.</p>
      </figcaption>
    </figure>
  </main>
</body>

</html>

将文本正确放置在居中图像下方

2 个答案: