How to align paragraphs next to the image in HTML and CSS?

Asked

Viewed 5,270 times

0

I have a test in .html and .css and wanted to align the text on the image side, how can I do that? I wanted to put it where the arrow shows.inserir a descrição da imagem aqui

HTML code

  <!doctype html>
  <html>
  <head>
        <title> </title>
        <meta charset = "utf-8"/>
        <link rel="stylesheet" type="text/css" href="estilof.css"/>

  </head>
        <body>
                <div id="wrap">
                    <header>
                        <h1 align="center">Fsociety Page</h1>
                        <div id="menu">
                            <nav>
                                <ul>
                                    <li><a href="link-img.html" alt="fsociety">Inicio</a></li>
                                    <li><a href="formularios.html">Formulário</a></li>
                                    <li><a href="">Sobre</a></li>
                                </ul>
                            </nav>
                        </div>
                    </header>
                </div>
                <h2 align="center">Mr Robot Fans</h2>   
                    <p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste </p>
                    <p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste 
                    </p>
                <figure id="img">
                    <img src="img/fsociety.png" alt="fsociety"/>
                    <figcaption><strong>Fsociedade</strong></figcaption>
                </figure>                   
        </body>
            </html>
html css

2 answers

0

Make a new div and place the image and text. Format the div 

.div
{
  width: 100%; 
  height: 100px;/* Aqui você pode alterar */
  display: flex;
}
.txt{
  /* A classe do texto */
  float: right;
}

0

Just give float: left in the image

<figure id="img" style="float: left">
    <img src="img/fsociety.png" alt="fsociety"/>
    <figcaption><strong>Fsociedade</strong></figcaption>
</figure>  

<h2 align="center">Mr Robot Fans</h2>   
<p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste </p>
<p> Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste 
</p>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.