gpt4 book ai didi

html - 在流畅的布局中居中文本

转载 作者:行者123 更新时间:2023-11-28 09:30:18 25 4
gpt4 key购买 nike

我有一个具有流畅/动态布局的网站,我需要在其中将特定文本元素置于图像之间的中心位置。一切都很好,花花公子,我已经通过更改文本元素的边距来做到这一点,但是如果我要更改 p 标签内的文本,图像将不再按原样对齐,或者文本将不再对齐显示在相邻图像的旁边。

类似于我的“问题”的 JSFiddle:http://jsfiddle.net/3s4bhwg4/4/

如果我的 JSFiddle 看起来不正确,理想的图像:

enter image description here

是否有一种更易于维护的方法来实现与文本居中相同的结果,或者使用边距达到这种可接受/被认为是良好做法的程度?

我对网页设计很生疏,所以我很乐意接受任何批评。

注意:调整 JSFiddle 宽度似乎会破坏布局。但是在我的本地网页上调整它的大小使其保持不变....

CSS:

#wrapper{

MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 100%;

}

.row{
width: 100%;
}

/*Please execuse my use of left/right in naming my ids. */
#contentleft{
float: left;
width: 60%;
}

#contentleft h1{
margin: 30% 5% 0 40%;
}

#contentleft p{
margin: 0 5% 0 40%;
}

#contentright{
float: right;
width: 40%;
}

#contentright p{
margin: 17% 30% 43% 10%;
}

img{
width: 100%;
}

HTML:

<div id="wrapper">
<div class="row">Header</div>
<div id="contentleft">
<IMG src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg"></IMG>

<H1>Random.</H1>

<P> Both texts must be centered next to their adjacent images as well. </P>
</div>

<div id="contentright">

<P>The margins of this text pushes the image down so it aligns with the corner of the other image.
</P>
<IMG src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg"></IMG>
</div>
</div>

最佳答案

这是我可以使用@JStephen 建议的最接近的表格:JSFIDDLE

我唯一能让它工作的方法是让一张图片不缩放。而且我无法让他们恰好在 Angular 落相遇。

编辑:现在正常工作... enter image description here enter image description here我设法通过在第一行中它上面的单元格中插入下面的图像来破解它,将其高度设置为 1px 并将不透明度设置为 0 并将其 float 。这是可行的,因为表格布局是固定的,所以第一行用于格式化表格。 (通过 float 隐藏图像,文本居中不受影响。)然后我将第二个图像的可见副本的宽度设置为 100%。

在 td 中添加了 padding: 0; 以及在 Table 中添加了 border-collapse: collapse; 以使 Angular 落与您的图片完全一样。 (好像默认的padding不为零)

只要文本的高度小于(可见)图像的高度,它就可以工作

HTML

<body>
<div class="row">Header</div>
<table id="wrapper">
<tr id="cont-top">
<td>
<img src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg" />
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
<p>The margins of this text pushes the image down so it aligns with the corner of the other image.</p>
</td>
</tr>

<tr id="cont-bottom">
<td>
<h1>Random.</h1>
<p> Both texts must be centered next to their adjacent images as well. </p>
</td>
<td>
<img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" />
</td>
</tr>
</table>

</body>

CSS

#wrapper {
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
height: 100%;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
z-index: 0;
}
td, tr{
padding: 0;
position: relative;
}
td{
/*outline: 1px dotted red;*/
}
.row {
width: 100%;
padding: 0.5em;
height: 4%;
}
/*top row********/
#cont-top {
height: auto;
margin: 0;
padding: 0;
}
/*image*/
#cont-top td:first-child {
width: 60%;
}
#cont-top img{
width: 100%;
vertical-align: bottom;
z-index: 20;
}
/*text*/
#cont-top td:last-child{
padding: 0;
}
#cont-top td:last-child p {
margin: 0 10px;
vertical-align: central;
}
/*formatting hack*/
#cont-top td:last-child img{
width: 100%;
height: 1px;
line-height: 1px;
float: left;
/*opacity: 0;*/
}
/*bottom row********/
#cont-bottom {
height: auto;
position: relative;
}
/*image*/
#cont-bottom td:last-child {
vertical-align: top;
}

#cont-bottom img{
vertical-align: top;
width: 100%;
left: 0;
z-index: 20;
}
/*text*/
#cont-bottom td:first-child {
vertical-align: central;
padding: 0 10px;
}

关于html - 在流畅的布局中居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25733914/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com