【发布时间】：2019-01-23 14:51:24
【问题描述】：
所以我试图将我的图像放在我的两列之一中。在这种情况下是左列。以下图为例。
我在第二列中有一些文字，但第一列中的图像看起来不像我想象的那样居中。这是它现在的样子。
红色圆圈是我希望我的图片实际位于的位置。
这是我的代码
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
@media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
/* Regular Desktop View */
h1 {
display: none;
}
img {
width: 170px;
height: 170px;
border-radius: 50%;
text-align: center;
}
h2 {
text-align: left;
margin-top: 30px;
}
p {
margin-right: 50px;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* End regular Desktop View */
/* Tablet/Smartphone view begins */
@media screen and (max-width: 768px) {
img {
width: 170px;
height: 170px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 {
display: block;
font-family: sans-serif, arial, verdana, lucida;
}
h2 {
text-align: center;
}
p {
width: 100%;
padding: 10px;
}
/* Home Page */
.column {
width: 100%;
}
}
</style>
</head>
<body>
<ul class="topnav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<li><a href="index.html" class="active">Home</a>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Me</a></li>
</div>
</ul>
<h1 align="center">HOME</h1>
<div class="row">
<div class="column">
<img src="img/image1.jpg" class="float-center">
</div>
<div class="column">
<h2>This is an h2 Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
</p>
</div>
</div>
</body>
</html>当我在桌面模式下全屏查看时，这不是我想要的。但是，当我将浏览器调整为平板电脑/智能手机模式时，我对此很满意。我的目标是在第一列中居中图像，无论您如何调整它的大小达到最大像素宽度。
【问题讨论】：
-
将
text-align: center;添加到图片的列中。 -
@Siavas 我遵循了在 W3Schools w3schools.com/howto/… 采取的相同步骤，在行 div 中，两列有两列 div。在第一列 div 中，我放置了图像，但它没有按预期工作。我有`img {宽度：170px;高度：170px；边界半径：50%；文本对齐：居中； /*注意：这已经在我的 index.html CSS*/ }`
-
@Siavas 我认为在我的代码中，我的桌面样式视图中的 .column {float: left;} 可能会导致这种奇怪的现象。
标签： html css media-queries responsive