如何将文本与居中的图像左侧对齐？
[英]How can I align text to the left of my image that is centered?
问题描述
This is what I have so far for the code...
这就是我到目前为止的代码......
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Stylesheets -->
<link href="style.css" rel="stylesheet" type="text/css">
<title>name of website</title>
</head>
<body>
</div>
<div class="topnav">
<img src="../images/website logo-01.png" width="80" height="80" alt="logo" class="logo">
<header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="contact.html">Contact</a></li>
<li> <a href="target="_blank">Resume</a>
</ul>
</nav>
<header id="portrait">
<img src="../images/portrait.jpg" width="2000" height="2000" alt="portrait" class="portrait"
style="float: left; margin-right: -8000px; margin-bottom:">
<p>this is where the text wold be going</p>
</header>
<main>
<main>
<aside>
<div>
</main>
enter image description here在此处输入图像描述
I would like the text to be aligned where the yellow bordered box is, and would appreciate some help.我希望文本在黄色边框的位置对齐，并希望得到一些帮助。
3 个解决方案
解决方案1
0 2020-07-20 03:20:38
You can do that by putting your <img> and your <p> tag together inside one div and by using display:flex on that div element.您可以通过将<img>和<p>标签放在一个 div 中并在该 div 元素上使用 display:flex 来做到这一点。
解决方案2
0 2020-07-20 03:22:14
Place the p tag before the img and do as follows:将p标签放在img之前，然后执行以下操作：
HTML HTML
<header id="portrait">
<p>this is where the text wold be going</p>
<img src="../images/portrait.jpg" alt="portrait" class="portrait">
</header>
CSS CSS
#portraid {
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
解决方案3
0 2020-07-20 03:27:41
You can use the css flex property like, put the image and text inside a div and add use display:flex property to the div and then you can use can use the order property if you want image and text in different order.您可以使用 css flex 属性，例如，将图像和文本放在 div 中，然后将 use display:flex 属性添加到 div，然后如果您希望图像和文本以不同的顺序排列，则可以使用 order 属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.