How to do the layout by using css only?

Question

I want to do the layout described here

https://github.com/robberfree/frontend-problem/tree/master/img-with-text

Is it possible to finish the task by using CSS only? I have tried some ways. But It's hard to keep a fixed margin between the img and text.

For the flex layout.The span's width may larger than the text real width like this:

.img-text {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-text img {
  width: 32px;
  object-fit: contain;
  margin-right: 8px;
}

.img-text span {
  text-align: center;
}

<p class="img-text">
  <img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" />
  <span>unexpected happened,Something unexpected happened
            Something unexpected happened,Something unexpected happened,Something unexpected happened
        </span>
</p>

Consider using `flexbox`: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Harun Yilmaz, Sep 19 '19 at 07:27

score 2 · Answer 1 · answered Sep 19 '19 at 07:36

Use a flexbox for alignment.

.img-text {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-text img {
  width: 32px;
  object-fit: contain;
  margin-right: 8px;
}

.img-text span {
  text-align: center;
}

<p class="img-text">
  <img src="https://github.githubassets.com/images/modules/logos_page/Octocat.png" />
  <span>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
            Aldus PageMaker including versions of Lorem Ipsum.
        </span>
</p>

Thanks a lot. I tried this way before.But I found that If i use flex to layout.The span's width may a little larger than It's really width.That will make the margin between img and text is not 8px. — robberfree, Sep 19 '19 at 07:58
it's not the width of span changing. As the text is center aligned words are moving to the center of span — Akhi Akl, Sep 19 '19 at 09:26
@AkhiAkl I know.I want to keep 8px margin from the text's left edge,not the span. — robberfree, Sep 19 '19 at 09:31

score 0 · Answer 2 · answered Sep 19 '19 at 08:09

0

Yes we can use flexbox

We just need to divide the layout into proper ratio using flex: n.
We need to align items vertically using align-items: center;

Here is working demo -:

https://stackblitz.com/edit/react-ff7og6

answered Sep 19 '19 at 08:09

Abhisar Tripathi

1,569
10
21

Thanks. I add a example used the flex layout.But the margin is not always 8px. – robberfree Sep 19 '19 at 08:25
We can add `padding-right: 8px;` @robberfree – Abhisar Tripathi Sep 19 '19 at 08:31
I don't mean that.You can run my code snippet and have a look. – robberfree Sep 19 '19 at 08:34

score 0 · Answer 3 · answered Sep 19 '19 at 08:44

One good way to do this would be to wrap both elements in a parent container. Then inside it divide to two container the right and the left ones like so with c1,c2,c3,c4:

C1 needs to have the following properties to align the inner containers in this layout:

.parent-container {
   display: flex;
   width: 100%;
   height: 125px;
}

C2 needs to following styling:

.c2 {
   display: flex;
   justify-content: center;
   align-items:center; 
}

C3 container would just contain the right side text and should take it's desired with wether in pixels or % according to your preference. It further seems you aligned the text with text-align: center so you can keep that property if that is what you desire.

Your picture can have its desired size, something like 50x50px or so and it would be perfectly centered both vertically and horizontally inside the c2 container, I named the img c4.

Enjoy and let me know if you have further questions

The key problem is keep 8px between the image and the left edge of the text.Maybe your answer is not solve the problem. — robberfree, Sep 19 '19 at 09:37
If you set a certain width with px or % you can get that spacing you desire without hard-coding a specific value of pixles to the right. It is a much more elegant solution as I see it. Play around with it, let me know what you think — greensin, Sep 19 '19 at 10:12

How to do the layout by using css only?

3 Answers3