时间戳

首页 > 解决方案 > 如何将文本与居中的图像左侧对齐？

html - 如何将文本与居中的图像左侧对齐？

问题描述

这就是我到目前为止的代码......

<!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>

在此处输入图像描述

我希望文本在黄色边框的位置对齐，并希望得到一些帮助。

标签： htmlcssatom-editor

解决方案

您可以使用 css flex 属性，例如，将图像和文本放在 div 中，然后将 use display:flex 属性添加到 div ，然后如果您希望图像和文本以不同的顺序排列，则可以使用 order 属性。

推荐阅读