Question 169302 in Html Question posted in
Some basic documentation can be found here.

How do I center an image and text together on a page?

The image (header logo) must take such place as several lines of the text, buttons and other content. All the header must be at the center of the web-page. The width of the header must be "elastic".

Here is the approximate image of what I need:
Site scheme
EDIT: this is all the code I have:

<HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <LINK rel="stylesheet" href="/style.css">
</HEAD><BODY>
<HEADER><CENTER>
<IMG src="/files/????????.png" height=128 alt="logo" class="left">
This is some content of the header like text, links, buttons etc.
</CENTER></HEADER>
</BODY></HTML>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I have solved so:

    .container
{
    display: flex;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}
.content
{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-gap: 8px;
    padding: 8px;
    display: flex;
    background: lightpink;
    height: 128px;
}
.content p
{
    margin: 0;
}
.logo
{
    height: 128px;
}
    <HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <LINK rel="stylesheet" href="/style.css">
</HEAD><BODY>
<HEADER><CENTER>
<DIV class="container">
    <DIV class="content">
        <IMG src="https://cataas.com/cat" class="logo">
        <DIV>
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</P>
            <P>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim</P>
            <P>ad minim veniam, quis nostrud exercitation ullamco</P>
            <P>laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</P>
            <P>eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,</P>
            <P>sunt in culpa qui officia deserunt mollit anim id est laborum.</P>
        </DIV>
    </DIV>
</DIV>
</CENTER></HEADER>
</BODY></HTML>


  2. 0

    Put both the image and the text in an enclosing container and then center that element.

    html, body {
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.content {
  width: 50%;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 10px;
  background: lightpink;
  height: 200px;
}

.content p {
  margin: 0;
}

.image {
  object-fit: cover;
  height: auto;
  width: 100%;
}
    <div class="container">
  <div class="content">
  <img src="https://cataas.com/cat" class="image">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    The easiest way to create this you need to use bootstrap and use this code for implementation.

    It’s a very blank example but enough for start to figure it out, how it’s works. The script line is not necessary for your solution anyway. So if you want, you just delete this line.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  </head>
  <body>
  <header>
    <div class="container">
      <div class="row">
        <div class="col">
          <IMG src="https://cataas.com/cat" height=128 alt="logo" class="left">
        </div>
        <div class="col">
           <p> This is some content of the header like text, links, buttons etc. </p>
        </div>
      </div>
    </div>
  </header>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search