Question

我在这里做错了什么？我希望这里的东西在屏幕中间，但是我正在尝试，我无法让它工作..

* {
  box-sizing: border-box;
}

body {
  max-width: 100%;
  line-height: 1.5;
}

#wrapper {
  max-width: 100%;
}

.bild {
  padding: 2em 0 0 2em;
}

img {
  max-width: 60%;
  padding-top: 1em;
  border-radius: 100px;
  float: left;
  display: block
}

h1 {
  font-weight: 900;
  font-size: 2em;
  float: right;
  margin-right: 25em;
  margin-top: 2.2em;
}

.floatright {
  float: left;
  margin-left: 10em;
}

<body>
  <div id="wrapper">
    <div class="bild">
      <img src="images/jag.jpg" alt="En bild på mig">
      <h1>Välkommen!</h1>
      <span class="floatright">Jag heter Patrik Qvarnström</span>
    </div>
  </div>
</body>

Answer 1

* { 
        box-sizing: border-box;
    }
    #wrapper{
      display: table;
      margin: 0 auto;
    }
    img {
        max-width: 60%;
        padding-top: 1em;
        border-radius: 100px;
        position: relative;
        float: left;
    }
    .container {
        position: relative;
        float: left;
        margin-left: 25px;
    }

<body>
    <div id="wrapper">
        <div class="bild">
            <img src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" alt="En bild på mig" width="150">
            <div class="container"> 
              <h1>Välkommen!</h1>
              <p class="floatright">Jag heter Patrik Qvarnström</p>
            </div>
        </div>
    </div>
</body>

Answer 2

从img中删除float：left并添加margin：auto如下：

＆＃13;

* { 
        box-sizing: border-box;
    }
    body {
        max-width: 100%;
        line-height: 1.5;
    }
    #wrapper {
        max-width: 100%;
    }
    .bild {
        padding: 2em 0 0 2em;
    }
    img {
        max-width: 60%;
        padding-top: 1em;
        border-radius: 100px;
        display: block;
		margin: auto;
    }
    h1 {
        font-weight: 900;
        font-size: 2em;
        float: right;
        margin-right: 25em;
        margin-top: 2.2em;
    }
    .floatright {
        float: left;
        margin-left: 10em;
    }

＆＃13;

<body>
    <div id="wrapper">
        <div class="bild">
            <img src="temp.PNG" alt="En bild på mig">
            <h1>Välkommen!</h1>
            <span class="floatright">Jag heter Patrik Qvarnström</span>
        </div>
    </div>
</body>

＆＃13;

Answer 3

如果Flexbox解决方案对你来说还可以 - 这就是（对于居中和总体来说非常酷）：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  line-height: 1.5;
}

#wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.bild {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 15%;
  height: auto;
  padding-top: 1em;
  border-radius: 100px;
  display: block
}

h1 {
  font-weight: 900;
  font-size: 2em;
  margin-top: .5em;
}

<div id="wrapper">
  <div class="bild">
    <img src="https://www.adrln.com/wp-content/uploads/2017/05/img.png" alt="En bild på mig">
    <h1>Välkommen!</h1>
    <span class="floatright">Jag heter Patrik Qvarnström</span>
  </div>
</div>

Answer 4

设置包含元素的宽度：在包含元素（父级）上声明width或max-width属性元素.bild，例如：max-width: 55%; - 调整此值因此，以适应要求。
水平对齐中心：使用值margin声明速记auto属性规则在包含（父）元素.bild上，例如：margin: auto; - 这将允许包含元素水平居中。

代码段示范：

＆＃13;

* {
  box-sizing: border-box;
}

body {
  max-width: 100%;
  line-height: 1.5;
}

#wrapper {
  max-width: 100%;
}

.bild {
  margin: auto;
  max-width: 55%; /* adjust this value accordingly to suit requirements */
  min-width: 425px; /* for the sake of demonstration */
  overflow: auto;
  border: 1px dashed; /* for the sake of demonstration */
  padding: 10px;
}

img {
  max-width: 60%;
  padding-top: 1em;
  border-radius: 100%;
  float: left;
}

h1 {
  font-weight: 900;
  font-size: 2em;
  margin-top: 2.2em;
}

.floatright {
  float: right;
  margin-left: 10px;
}

＆＃13;

<body>
  <div id="wrapper">
    <div class="bild">
      <img src="https://placehold.it/200x200" alt="En bild på mig">
      <h1 class="floatright">Välkommen!</h1>
      <span class="floatright">Jag heter Patrik Qvarnström</span>
    </div>
  </div>
</body>

＆＃13;

摘要：

.bild是div元素
div元素是块级元素（占据完整水平宽度，与内联元素不同）
水平居中块级元素： 1。声明width property和 2。声明margin属性，其值为auto
任何元素都可以通过声明成为块级元素 display: block

注意：如果声明了任何float属性，上述技术的行为将不会如所解释的那样，float将否定任何水平对齐的尝试，除非有问题的元素已被声明为flex-box显示，例如：display: flex

实际演示：
_{对于块级和内联元素}

Horizontal Alignment (Arbitrary Elements) ^{（CodePen）}
Horizontal Alignment (Text Elements) ^{（CodePen）}

想让这些东西集中

4 个答案: