CODEWITHSUNDEEP
htmlcss
Michelle Dimwaite
Michelle Dimwaite

Reputation: 115

How to center text in a div wrapped in a mother div

i am trying to center a block of text next to an image all contained in a main container. for some reason. i am having the black of text centered in the middle of the page itself out of the container.

.wrapper {
  display: inline-block;
  width: 240px;
  height: 200px
}

.textblock {
  display: inline-block;
  max-width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
}
<div class="wrapper">
  <div class="this">
    <img src="image.jpg">
  </div>

  <div class="textblock">
    <h2>title</h2>
    <p> Some paragraph here</p>
    <a href="#">link</a>
  </div>
</div>

The wrapper should be centered in the middle of the link while the contents of the wrapper also centered in the middle of the wrapper. Image on the left, text on the right.

For some reason, i had the textblock centered at the middle of the page instead. not in the container.

Any good hands out here to get me out of this? Thanks in advance Michelle

Upvotes: 0

Views: 103

Answers (3)

VXp
VXp

Reputation: 12078

Here is the second solution you asked for (made it for multiple images/text; I think you might need it):

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.wrapper {
  width: 1200px; /* changed */
  max-width: 100%;
  margin: 0 auto;
}

.wrapper > .box {
  display: flex;
  margin-bottom: 10px;
  background: Lavender; /* added for better presentation */
}

.wrapper > .box:last-child {
  margin-bottom: 0; /* optional; sets the margin-bottom to 0 for the last box child/element inside the parent wrapper */
}

.wrapper > .box > img {
  flex: 7.2; /* added; means 60% */
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.wrapper > .box > .textblock {
  flex: 4.8; /* added; means 40%; 7.2 + 4.8 = 12; because of the 1200px wrapper width */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly; /* vertical alignment, other values you can try: space-between; space-around; flex-start; center; flex-end; */
  align-items: center; /* horizontal alignment, before: text-align: center; */
}
/* changed to 480px */
@media screen and (max-width: 480px) {
  .wrapper > .box {
    flex-direction: column; /* to stack them one above the other, i.e. two rows */
  }
}
<div class="wrapper">
  <div class="box">
    <img src="http://lorempixel.com/output/animals-q-c-720-250-9.jpg" alt="img1">
    <div class="textblock">
      <h2>Title</h2>
      <p>Some paragraph here.</p>
      <a href="#">Link</a>
    </div>
  </div>
  <div class="box">
    <img src="http://lorempixel.com/output/animals-q-c-720-250-5.jpg" alt="img1">
    <div class="textblock">
      <h2>Title</h2>
      <p>Some paragraph here.</p>
      <a href="#">Link</a>
    </div>
  </div>
  <div class="box">
    <img src="http://lorempixel.com/output/animals-q-c-720-250-1.jpg" alt="img1">
    <div class="textblock">
      <h2>Title</h2>
      <p>Some paragraph here.</p>
      <a href="#">Link</a>
    </div>
  </div>
</div>

As you can notice, the original size of the used image is 720px (or 60% of 1200px wrapper) in width and 250px in height, just like you said. In this case it needs to be at least 720px wide, it can be more and it won't change anything (presentation), but if it's less, then it loses on quality and ratio. Please note that if you decide to go "full screen" without wrapper limitation at 1200px, you need to find a wider image which, optimally, must be at least 60% of the screen width (if you decide to keep that 60%/40% ratio). I personally prefer a wrapper with defined width, like 1200px in this case, if not 1200px then maybe you can give it 1920px but I wouldn't go beyond that (if your "designing screen/monitor" is at least that wide of course). You can also use 1400px if you want but like I said, nowadays containers/wrappers are usually set to 1200px though this "trend" can change in a couple of years or so.

I added some useful comments for better explanation and if you need any additional help just let me know.

Upvotes: 0

tomsmithweb
tomsmithweb

Reputation: 371

You should add:

.wrapper {
  position: relative;
}

Upvotes: 3

Kartik Prasad
Kartik Prasad

Reputation: 740

.textblock {
  display: inline-block;
  max-width: 300px;
  position: relative;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
}
.this {
  display: inline-block;
}
<div id="wrapper">
  <div class="this">
    <img src="https://i.sstatic.net/eUM8z.png?s=48&g=1">
  </div>

  <div class="textblock">
    <h2>title</h2>
    <p> Some paragraph here</p>
    <a href="#">link</a>
  </div>
</div>

Upvotes: 0

Related Questions