问HTML文本对齐
EN

Stack Overflow用户

提问于 2016-04-06 08:34:56

回答 1查看 54关注 0票数 0

<!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。我试图对齐文本旁边的图像，但更多的居中。图像//词相接。!(o.png?oh=015129c632edec86ecb8e0d3421059b1&oe=570731A7)

html

css

回答 1

Stack Overflow用户

发布于 2016-04-06 09:02:39

尝试将页面划分为两列。一个用于.image，另一个用于.content。同时使用display:inline-block;和max-width:50%;，以便它们在调整大小时不会中断(尽管您应该使它们在小型设备中出现在另一个下面)。使用@media查询)。应用vertical-align:middle;和瞧！你可以走了。

为了简化开发过程，请使用引导。

* {
  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;
}

<!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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36445691

复制

相似问题

问HTML文本对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML文本对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML文本对齐
EN