Question

我想知道如何在我的代码中对齐文本旁边的图像。

请忽略它是多么的混乱。我正在为学校做一个项目，我不知道如何解决我遇到的这个问题。该项目不是强制性的，尽管它可以赢得我所需要的未来涉及比特币项目的覆盆子pi。

＆＃13;

this.leftside

＆＃13;

Answer 1

的变化：

将#text移到#image内format class container并使用display:flex代替float:left on your #text container也提供垂直对齐。
在格式类上添加align-items:center以垂直对齐其内容，即文本和图像。

更新了小提琴：https://jsfiddle.net/sbakj4x0/

body,
html {
  margin-top: -11px;
  margin: 0;
  height: 100%;
  min-width: 1000px;
  background-color: red;
}

.bg {
  margin-left: 20%;
  width: 60%;
  background-color: grey;
  border-left: thick solid black;
  border-right: thick solid black;
}

.background {
  background-image: url("images/background.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
}

.banner {
  width: 100%;
  border-bottom: thick solid black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-bottom: thick solid black;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none!important;
  font-family: "Arial Black", Gadget, sans-serif;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #FFD700;
  color: black;
}

.header {
  font-size: 80pt;
  font-family: "Arial Black", Gadget, sans-serif;
  color: black;
  text-align: center;
  min-width: 80pt;
}

.dotted_line {
  border-top: 2px dashed black;
  width: 70%;
}

.paragraph {
  font-size: 15pt;
  width: 500px;
  margin-left: 0%;
  color: black;
}

.sub_header {
  text-align: center;
  font-size: 50pt;
  color: black;
}

.credit {
  width: 560;
  size: 20pt;
  text-align: center;
  font-style: italic;
}

.video {
  width: 70%;
  margin-left: 15%;
  border: thick solid black;
}

.credit_link {
  text-decoration: none;
}

#image {
  width: 45%;
}

#text {
  width: 45%;
  font-size: 15pt;
  color: black;
  padding-top: 20px;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
}

.format {
  width: 90%;
  margin-left: 10%;
  overflow: hidden;
  align-items: center;
  display: flex;
  align-items: center;
}

<!DOCTYPE html>

<body>
  <div class="background">
    <div class="bg">
      <img src="https://i.imgur.com/gsceMM5.png" class="banner">
      <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="stats.html">Stats</a></li>
        <li><a href="history.html">History</a></li>
        <li><a href="info.html">Info</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <p class="header"> WELCOME</p>
      <hr class="dotted_line" />
      <p class="sub_header">What is Bitcoin?</p>
      <video class="video" poster="images/thumbnail.jpg" controls>
        <source src="videos/info.mp4" type="video/mp4">
      </video>
      <p class="credit">
        (Credit to <a class="credit_link" href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on youtube.com)
      </p>
      <div class="format">
        <p id="text">
          Bitcoin is a new currency that was created in 2009 by an unknown person using the alias Satoshi Nakamoto. Transactions are made with no middle men – meaning, no banks! Bitcoin can be used to book hotels on Expedia, shop for furniture on Overstock and
          buy Xbox games. But much of the hype is about getting rich by trading it. The price of bitcoin skyrocketed into the thousands in 2017.
        </p>
        <img src="https://i.imgur.com/BGsKZms.png" id="image" />

      </div>
    </div>
  </div>
</body>

垂直使用文本对齐图像

1 个答案: