Question

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
body {
    background-image: url("bg.jpg");
}
.image{
    margin-top:200px;
    margin-left:50px;
}
h1.tx{
    margin-top:100px;
    margin left: 600px;
}
<title>Company's Info</title>

</style>
</head>
<body>
<img class="image" src='about.jpg' width="450" height="300" />
<h1 class="tx">About </h1>
<h2><center>Locations</center></h2>
<p><center>No 1, Triq San Gorg, St. Julian's, Malta</center></p>
<h2><center>Contact info</center></h2>
<p><center>Telephone: +(356) 2138 4066 <br> <br>E-mail: info@badassburgers.eu</center></p>
<h2><center>Opening hours</center></h2>
<p><center>Mon - Thur: 18:00 - 23:00 <br><br> Fri - Sun: 12:00 - 00:00</center></p>

</body>
</html>

我正在建立一个网站，对html和CSS很新。我正在努力调整图像旁边的文字，但更集中。 [image] //彼此相邻的话。！（https://scontent-fra3-1.xx.fbcdn.net/hphotos-xfp1/v/t35.0-12/12946923_1103488123006439_2107255178_o.png?oh=015129c632edec86ecb8e0d3421059b1&oe=570731A7）

Answer 1

尝试将页面分为2列。一个用于.image，另一个用于.content。同时提供display:inline-block;，max-width:50%;，以便在调整大小时不会中断（尽管您应该让它们在小型设备中显示为低于另一个。使用@media个查询）。申请vertical-align:middle;瞧！你很高兴。

为了便于开发，请使用Bootstrap。

＆＃13;

* {
  box-sizing: border-box;
}
body {
  background-image: url("bg.jpg");
  margin: 0;
}
#container {
  text-align: center;
}
.image {
  max-width: 50%;
  display: inline-block;
  vertical-align: middle;
}
.image img {
  max-width: 100%;
}
.content {
  text-align: center;
  max-width: 50%;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 20px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Company's Info</title>
</head>

<body>
  <div id="container">
    <div class="image">
      <img src='http://i.imgur.com/bCbboKC.jpg' />
    </div>
    <div class="content">
      <h1 class="tx">About </h1>
      <h2>Locations</h2>
      <p>No 1, Triq San Gorg, St. Julian's, Malta</p>
      <h2>Contact info</h2>
      <p>Telephone: +(356) 2138 4066
        <br>
        <br>E-mail: info@badassburgers.eu</p>
      <h2>Opening hours</h2>
      <p>Mon - Thur: 18:00 - 23:00
        <br>
        <br>Fri - Sun: 12:00 - 00:00</p>
    </div>
  </div>
</body>

</html>

＆＃13;

HTML文本对齐

1 个答案: