如何使图像左对齐



我写了这段代码:

<section  class="termine">
<div   class="container">
<img  class="img" src="https://www.buildinglogix.net/wp- 
content/uploads/2017/01/BLX_Homepage-Banner.jpeg" 
alt="image building">
</div>
<h1 class="text1">Chi sono</h1>
</section>

和这个 CSS:

.termine {
float:left;
display: block;
align:left;
width:100%;
width:100%;
position:absolute;
margin: 0; padding: 0; border: 0; outline: 0;}

.container {
display: block;
align:left;
width: 1290px;
padding: 0px 0px 0px 0px;
float: left;

}

.img {
display: block;
align:left;
width:1290px;
padding: 0px 0px 0px 0px;
border: 0;
margin: 0;
outline: 0;
float: left;  
text-align: left;

}

请帮助我
是引导链接与它之间的恐惧吗? 如何使它没有空白?

您的引导 CSS 是在更新容器 CSS 之后加载的。将您的自定义 css 移动到引导 css 下方。

引导程序"容器"类正在覆盖你的类。

它应该看起来像这样:

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.container {}
</style>
</head>

您是否在页面中包含引导程序?如果是,则无需重写其中的容器类。仍然如果你想扩大容器,你可以简单地写

.container { width: 1290px; }

编写的代码中的align:left不起作用,也不是必需的。使用属性时无需编写align:leftfloat。 不仅如此,默认情况下,图像仅与左侧对齐。我不明白您是否在"termine"div 中使用position:absolute,而您只想在容器内显示图像。

只需编写 HTML:

<div class="container"> <img src="https://www.buildinglogix.net/wp-content/uploads/2017/01/BLX_Homepage-Banner.jpeg" alt="img"> </div>

然后在 CSS 中

*, body { margin:0; padding: 0;} .container { width: 1290px;} .container img { width:100%; height:100%; vertical-align: top; }

以实现全宽高度的图像并向左对齐。 希望答案对您有所帮助。

最新更新