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

Html – my images won't float horizontally & center instead of vertically & center

The images I want to float are still left-aligned on my page when I use align: center

But when I use display: flex, they all center, but vertically. I’m trying to get them to be horizontal but I don’t know what’s affecting them. I’m trying to center them over the second (pink) box

#base {
  margin: auto;
  width: 1300px;
  display: flex;
  margin-top: -10px;
  margin-bottom: -10px;
}

#left {
  width: 260px;
}

#right {
  width: 300px;
}

#center {
  width: 850px;
  background-image: url(https://fancyparts.com/fancyparts/cg/pattern/strip_a/strip_a50.gif);
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 30px;
  border-radius: 30px;
  border: 5px outset #ff8282;
}

#headliner {
  height: 20px;
  margin-left: 140px;
  margin-right: 10px;
}

#navi {
  border-width: 8px;
  border-style: solid;
  border-image: url("") 30 fill round;
  width: 170px;
  margin-top: 0px;
  margin-left: 45px;
}

.centerimage {
  width: 50%;
  size: 40px;
  max-width: 40px;
  max-height: 40px;
}
<img src="https://i.postimg.cc/YSp3TDc2/v.gif" style=";" margin-bottom:="" 18px;="" class="centerimage">
<img src="https://i.postimg.cc/jjZXT6KH/i.gif" style="vertical-align: center;" margin-bottom:="" 18px;="" class="centerimage">
<div id="base">
  <div id="left">
    <div id="headliner"></div>
    <div id="navi">
      <div id="titulo">navigate</div>
      <button class="buttonA"><a href="(LINK)"> homepage </a> <img src="" width="15"> </button>
      <div id="titulo">socials</div>
      <button class="buttonA"><a href="(lINK)"> about me </a> <img src="" width="15"> </button>
    </div>
  </div>
  <div id="center">
    <div class="border"></div>
    <div id="top">
    </div>
  </div>
</div>

<div id="right">
</div>
Tags:

3

Answers


  1. 0

    To align images horizontally but keep them left-aligned, learn CSS Flexbox. Use properties like justify-content and align-items on your container (#base). Check for conflicting styles on your images. Understanding Flexbox will help you fix similar layout problems easily.

    (edit): Also you should use css externally. Search up how to use css externally.

    Login or Signup to reply.
  2. 0

    Here’s a demo of how to accomplish your design referenced in your image, with consideration to your current html. I think some things in your html could use a bit of clarity, but I’m trying to stay true to the structure of your project.

    I created a wrapper for the long element, and a wrapper for the images. I placed the images as a child of the long element. By default, the long element is a flex column which aligns its items to the center. This helps the page respect the height of the image content, however it’s not quite true to your image.

    Staying more true to your image, when the checkbox is checked, I positioned the images absolutely while the parent is relatively positioned to anchor my bottom and left selector. finally, I use translate to center it, because the left property will position based on the top left corner.

    If you have any questions, feel free to ask.

    #base {
  margin: auto;
  width: 1300px;
  display: flex;
  margin-top: -10px;
  margin-bottom: -10px;
}

#left {
  width: 260px;
}

#right {
  width: 300px;
}

#center {
  width: 850px;
  background-image: url(https://fancyparts.com/fancyparts/cg/pattern/strip_a/strip_a50.gif);
  margin: 0 auto;
  height: 40px;
  border-radius: 30px;
  border: 5px outset #ff8282;
}

#headliner {
  height: 20px;
  margin-left: 140px;
  margin-right: 10px;
}

#navi {
  border-width: 8px;
  border-style: solid;
  border-image: url("") 30 fill round;
  width: 170px;
  margin-top: 0px;
  margin-left: 45px;
}

.centerimage {
  width: 50%;
  size: 40px;
  max-width: 40px;
  max-height: 40px;
}

.long-el-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.img-wrap {
  display: flex;
}

label {
  user-select: none;
}

#absolute-toggle:checked ~ #base .long-el-wrap {
  position: relative;
}

#absolute-toggle:checked ~ #base .long-el-wrap .img-wrap {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
}
    <label for="absolute-toggle">
  Toggle Absolute Style
</label>
<input type="checkbox" id="absolute-toggle" />

<br />
<br />
<br />

<div id="base">
  <div id="left">
    <div id="headliner"></div>
    <div id="navi">
      <div id="titulo">navigate</div>
      <button class="buttonA"><a href="(LINK)"> homepage </a> <img src="" width="15"> </button>
      <div id="titulo">socials</div>
      <button class="buttonA"><a href="(lINK)"> about me </a> <img src="" width="15"> </button>
    </div>
  </div>
  <div class="long-el-wrap">
    <div class="img-wrap">
      <img src="https://i.postimg.cc/YSp3TDc2/v.gif" style=";" margin-bottom:="" 18px;="" class="centerimage">
      <img src="https://i.postimg.cc/jjZXT6KH/i.gif" style="vertical-align: center;" margin-bottom:="" 18px;="" class="centerimage">
    </div>
    <div id="center">
      <div class="border"></div>
      <div id="top">
      </div>
    </div>
  </div>
</div>

<div id="right">
</div>
    Login or Signup to reply.
  3. 0

    An image is, by default, an inline element. Think of it like a word in a sentence. You can’t center an individual word, but you can center a paragraph containing a single word.

    The simplest solution is to put your images inside a div or p wrapper, then style the wrapper with text-align: center.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search