如何解决将文本/链接与下面的响应图像水平对齐
我有一堆div，它们以响应式布局垂直堆叠在一起。最上面的一个包含文本，下面的第二个具有居中的图像，背景为蓝色（其最大宽度受其父div的高度限制）。我添加了一些背景色以突出显示有问题的div的边界。
我想将顶部文本始终对齐到图像的右侧边缘，无论响应窗口/屏幕尺寸变化的图像的大小/宽度如何。目前，文本已与其父<div class="row" id="top_row">
<div class="column" id="header_div">
<p class="top_text">Some text</p>
</div>
</div>
<div class="row" id="image_row">
<div class="column" id="image_div">
<img class="image_content" src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" />
</div>
</div>
的最右边对齐。
最干净的方法是什么？最干净的是，我的意思是在现代浏览器（> 2016）中具有最佳兼容性，并且不影响其余页面元素。
相关html：
#header_div,#image_div,#long_text_div,#short_text_div,#bottom_text_div {
height: inherit;
text-align: center;
}
.top_text {
font-style: normal;
font-size: 0.83vmax;
margin-left: auto;
margin-right: auto;
float: right;
position: relative;
top: 60%;
transform: translateY(-40%);
}
.image_content {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
margin: 0 auto;
}
和CSS：
import react from "react";
export default class App extends react.Component {
state = {
loading: true,person: null
};
async componentDidMount() {
const url = "API goes here";
const response = await fetch(url);
const data = await response.json();
this.setState({ person: data[0],loading: false });
console.log(data[0]);
}
render() {
return (
<div>
{this.state.loading || !this.state.person ? (
<div>loading...</div>
) : (
<div>
<div>{this.state.person.firstName}</div>
<div>{this.state.person.lastName}</div>
</div>
)}
</div>
);
}
}
解决方法
在我的示例中，动态计算底部图像的宽度，然后将宽度分配给顶部内容。另外，您需要向#top_row容器中添加两个规则，如下所示：
#top_row {
height: 25vh;
width: 60%;
margin: 0 auto;
background-color: #A5DEF4;
display: flex; /*add this it*/
justify-content: center; /*add this it*/
}
有必要吗？
function f_width() {
let header_div = document.querySelector('#header_div');
let image_div = document.querySelector('.image_content').offsetWidth;
header_div.style.width = image_div + 'px';
}
window.addEventListener("load",f_width);
window.addEventListener("resize",f_width);* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 12px;
font-family: "Verdana",sans-serif;
background: #E5E7E9;
color: #000000;
text-align: center;
}
.row::after {
content: "";
clear: both;
display: table;
}
.column {
width: 100%;
float: left;
}
#top_row {
height: 25vh;
width: 60%;
margin: 0 auto;
background-color: #A5DEF4;
display: flex;
justify-content: center;
}
#image_row {
height: 40vh;
width: 60%;
margin: 0 auto;
background-color: #BDC0BA;
}
#text_row_1 {
height: 7vh;
width: 60%;
margin: 0 auto;
}
#text_row_2 {
height: 3vh;
width: 60%;
margin: 0 auto;
}
#bottom_row {
height: 25vh;
width: 60%;
margin: 0 auto;
}
#header_div,#image_div,#long_text_div,#short_text_div,#bottom_text_div {
height: inherit;
text-align: center;
}
.top_text {
font-style: normal;
font-size: 0.83vmax;
margin-left: auto;
margin-right: auto;
float: right;
position: relative;
top: 60%;
transform: translateY(-40%);
}
.image_content {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
margin: 0 auto;
}
.text_content {
font-style: normal;
font-size: 1vmax;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
padding-left: 30pt;
padding-right: 30pt;
}
.bottom_content {
font-style: italic;
font-size: 0.67vmax;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
padding-bottom: 30px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<title>Test test</title>
</head>
<body>
<div class="container">
<div class="row" id="top_row">
<div class="column" id="header_div">
<p class="top_text">Some text</p>
</div>
</div>
<div class="row" id="image_row">
<div class="column" id="image_div">
<img class="image_content" src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" />
</div>
</div>
<div class="row" id="text_row_1">
<div class="column" id="long_text_div">
<div class="text_content">
</div>
</div>
</div>
<div class="row" id="text_row_2">
<div class="column" id="short_text_div">
<div class="text_content">
</div>
</div>
</div>
<div class="row" id="bottom_row">
<div class="column" id="bottom_text_div">
<div class="bottom_content">
</div>
</div>
</div>
</div>
</body>
</html>
没有js的解决方案（看看问题）。
您需要这样做：
.column {
width: inherit;
/* float: left;*/
}
并将其添加到CSS：
.row {
display: flex;
justify-content: center;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 12px;
font-family: "Verdana",sans-serif;
background: #E5E7E9;
color: #000000;
text-align: center;
}
.row::after {
content: "";
clear: both;
display: table;
}
.row {
display: flex;
justify-content: center;
}
.column {
width: inherit;
/* float: left;*/
}
#top_row {
height: 25vh;
width: 60%;
margin: 0 auto;
background-color: #A5DEF4;
}
#image_row {
height: 40vh;
width: 60%;
margin: 0 auto;
background-color: #BDC0BA;
}
#text_row_1 {
height: 7vh;
width: 60%;
margin: 0 auto;
}
#text_row_2 {
height: 3vh;
width: 60%;
margin: 0 auto;
}
#bottom_row {
height: 25vh;
width: 60%;
margin: 0 auto;
}
#header_div,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" />
</div>
</div>
<div class="row" id="text_row_1">
<div class="column" id="long_text_div">
<div class="text_content">
</div>
</div>
</div>
<div class="row" id="text_row_2">
<div class="column" id="short_text_div">
<div class="text_content">
</div>
</div>
</div>
<div class="row" id="bottom_row">
<div class="column" id="bottom_text_div">
<div class="bottom_content">
</div>
</div>
</div>
</div>
</body>
</html>,
您可以将图像和文本封装在同一个div中，而将两者都保留为display：block;并在必要时使用margin-top：-50px;重新定位图像中的位置。如果我对问题的理解正确，则这是无需使用javascript即可对齐的最干净的方法。
,好吧，首先，要获得最干净的答案，您需要清除代码和标记。
您的代码有什么问题？
-
请勿使用
display:table显示不是表格的内容！另外，有flex和grid可以使您的页面整洁，简单，使用它们！ -
使用类说事物看起来是错误的！因为CSS的全部目的是允许一个标记多次出现。用类说标签是什么意思，也是错误的！每个标签都有其含义，请正确使用它们。最好的“理想” HTML几乎不需要修改即可获得完整的外观。
-
不要无所事事地使用类，而不要无休止地使用无休止的
div！您想要设置p的样式，然后在CSS中使用p/header p {}！使用p而不是text-top有多少困难？真？文字顶部？ Read more about 2 and 3 here。 -
请勿使用
px，而应使用em。
EM会根据用户的喜好进行缩放，因此用户无需缩放。如果 如果您将EM与流体或半流体设计一起使用，则布局会更少 放大时可能会断裂。 EM是可乘的，所以如果您使用它 对于所有尺寸，您都要调整父级和所有子级的大小 改变它。
所以，这可能不是您要寻找的答案，因为我先清理了您的代码，然后将您想要的内容应用于文本，但是无论如何，请看一下底部的解决方案。
如何解决您的问题？
由于文本和图像位于两个不同的容器中，因此我们需要使用一些技巧。
第一个解决方案：在CSS中将div内的header用作宽度包装，并将其中的max-width设置为div。
由于高度是恒定的，因此您可以找到图像的最大宽度并使用它来设置calc()包装器。 take a look here in codepen about this solution。
第二个解决方案：使用calc((100% - {image width})/2)计算对齐文本和图像所需的填充。
由于在容器大于图像的同时图像的宽度是恒定的，因此可以使用div获得文本的左右填充。当容器宽度等于或小于图像时，以上计算将返回0，这是正确的。 Check it out on codepen.
该计算如何工作？
通过从图像宽度中减去100％，获得图像周围的空白，然后将其除以2，获得左右填充。
如果您不想手动设置宽度并按高度计算宽度（这不是必需的且没有意义的话），则可以使用图像的长宽比来实现。
底线：
如果您不坚持使用指定的高度，则可以在第一个解决方案中同时使用function script() {
var spreadsheet = SpreadsheetApp.getActive();
var lastrow = spreadsheet.getLastRow();
var lastcolumn = spreadsheet.getLastRow();
var ranges = spreadsheet.getRange(1,1,lastrow,lastcolumn).getBackground()
var protection = spreadsheet.getActiveSheet().protect();
for (var i = 0; i < ranges.length; i++) {
for (var j = 0; j < lastcolumn; j++) {
if (ranges[i][j] == 'Pink') { //any color code
protection.setUnprotectedRanges([spreadsheet.getRange(i,j)])
.removeEditors(['user1@domain.com','user2@domain.com']);
protection.addEditor('user0@domain.com');
}
}
}
SpreadsheetApp.flush();
};或对解决方案2都使用相同的填充。
我对 CSS 很陌生，所以我可能是错的。但它会不会像这样简单：
@client.event #ready
async def on_ready():
print('Servers connected to:')
for guild in client.guilds:
print(guild.name)
await asyncio.sleep(3)
或可能将位置设置为固定。但我认为它会固定在屏幕上的一个位置，这意味着滚动不起作用。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。