Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.
Course Of The Month
5 days, 12 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Element alignment and word wrapping
Posted on 2016-11-18
Hi everybody.
I have a div which contains 2 man elements, an anchor tag and a span: the first should contain an image (the user avatar), the second the user name.
I woud like to get 2 results:
1) the user name should be aligned with the vertical center of the image
2) If the user name is too long for the container div should wrap remaining aligned with the vertical center of the image
The result should be something the one you can see in attached image:
Here you find a jsFiddle to play with. In the fiddle you fins relevant markup and related relevant css rules... which fail :)
Thank you for any suggestion.
I have a div which contains 2 man elements, an anchor tag and a span: the first should contain an image (the user avatar), the second the user name.
I woud like to get 2 results:
1) the user name should be aligned with the vertical center of the image
2) If the user name is too long for the container div should wrap remaining aligned with the vertical center of the image
The result should be something the one you can see in attached image:
Here you find a jsFiddle to play with. In the fiddle you fins relevant markup and related relevant css rules... which fail :)
Thank you for any suggestion.
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
3-
3
3
9 Comments
Have a look: https://jsfiddle.net/w61k58q3/2/
Active today
Here is a solution without flex - which has pre IE 10 compatibility issues
CSS
CSS
<style type="text/css">
ul {
list-style: none;
}
ul li {
padding: 10px;
}
ul li:nth-child(odd) {
background: #f5f5f5;
}
ul li:nth-child(even) {
background: #cfcfcf;
}
ul li span {
display: inline-block;
vertical-align: middle;
width: 70px;
margin-left: 5px;
}
.avatar {
width: 25px;
vertical-align: middle;
display: inline-block;
}
.avatar img {
width: 100%;
}
</style>
<ul>
<li>
<a href="" class="avatar"><img src="images/pic2.png" /></a>
<span>Frederico Stephano Milano Smit</span>
</li>
<li>
<a href="" class="avatar"><img src="images/pic2.png" /></a>
<span>bob</span>
</li>
</ul>
Active today
Hi guys, thank you for your answers.
@SSupreme: your solution is really simple to apply to my existing code but I'm wondering if you already know the way to get the username aligned to the vertical center of the image when word-wrap is not applied
@Julian: your solution gets exactly the result I want: wonderful.
I'll split points because both soluutions are good indeed: I've just to choose which solution apply. A really comfortable situation :)
@SSupreme: your solution is really simple to apply to my existing code but I'm wondering if you already know the way to get the username aligned to the vertical center of the image when word-wrap is not applied
@Julian: your solution gets exactly the result I want: wonderful.
I'll split points because both soluutions are good indeed: I've just to choose which solution apply. A really comfortable situation :)
https://jsfiddle.net/w61k58q3/3/
Not sure why Marco Gasi would want to use unordered list if he already has divs...
P.S. no need to split points
P.S.S. I believe that browser compatibillity isn't and issue anymore, we cannot wait until all of outdated browsers die out. If person uses IE6 he accepts that he wouldn't be able to get full experience of viewing webpages. That is why both of you have high end browsers, and to work for less than 1% of bots, scam browsers and some people isn't energy efficient.
Not sure why Marco Gasi would want to use unordered list if he already has divs...
P.S. no need to split points
P.S.S. I believe that browser compatibillity isn't and issue anymore, we cannot wait until all of outdated browsers die out. If person uses IE6 he accepts that he wouldn't be able to get full experience of viewing webpages. That is why both of you have high end browsers, and to work for less than 1% of bots, scam browsers and some people isn't energy efficient.
Active today
Unfortunately there are situations out there where older versions of IE are still in use - especially in corporations. It is not for us to decide whether or not it is relevant or not - but it is necessary to add the disclaimer so that should the target audience include browsers that are not capable of running the solution, the author is aware of this upfront.
When coding in html - it is advisable to use elements that match what it is you are doing. You can use a div as a submit button or a span as a link but it is not necessary to do so and by using the elements for the purpose they were designed helps to add clarity to the design of the document.
<div>'s and <dd><dl> elements are both valid options in this case - but at the end of the day the result is an unordered list of items. There is a certain amount of logic to using the <ul> in this case. That is not to say you can't use <div>'s - just that when reading the html when you see <ul> you know it is a list - as opposed to seeing a bunch of nested <div>'s
Just my 2c worth.
When coding in html - it is advisable to use elements that match what it is you are doing. You can use a div as a submit button or a span as a link but it is not necessary to do so and by using the elements for the purpose they were designed helps to add clarity to the design of the document.
<div>'s and <dd><dl> elements are both valid options in this case - but at the end of the day the result is an unordered list of items. There is a certain amount of logic to using the <ul> in this case. That is not to say you can't use <div>'s - just that when reading the html when you see <ul> you know it is a list - as opposed to seeing a bunch of nested <div>'s
Just my 2c worth.
There is no such corporations in Europe. Even in my poor country, it is impossible to find who use at least IE9. But as a developer you can make it compatible for stones, but it is not worse it. Do you troubleshot each of your projects, whether it is compatible with each and every browser and version? I don't believe the answer is yes.
Julian, your solution is simple and genius: vertical-align: middle; for avatar and width:**px; for username. But redoing whole markup isn't genius, you make it look like that code wouldn't work without whole redo. "your solution is really simple to apply to my existing code", Julian's even more simple.
And I would be fine without assistant solution.
Julian, your solution is simple and genius: vertical-align: middle; for avatar and width:**px; for username. But redoing whole markup isn't genius, you make it look like that code wouldn't work without whole redo. "your solution is really simple to apply to my existing code", Julian's even more simple.
And I would be fine without assistant solution.
Active today
@SSupreme: I splitted points because both solution in jsFiddle work fine, both solve my problem (even if now I'm having problem because evidently there is something soewhere which is preventing the Julian solution to work and I'll try your one).
I have choosen Juian answer as best solution because his arguments about list markup convinced me but I thiink we have to award points to all answers which solve the question independently on which one we decide to apply to our code :)
I'll let you know if I'll get it working applying your solution - even if I'm still fighting to understand why the Julian list doesn't work once I put it in my app. Unfortunately, I can't give you a ink to a live page because I'm developing a Cordova mobile app...
I have choosen Juian answer as best solution because his arguments about list markup convinced me but I thiink we have to award points to all answers which solve the question independently on which one we decide to apply to our code :)
I'll let you know if I'll get it working applying your solution - even if I'm still fighting to understand why the Julian list doesn't work once I put it in my app. Unfortunately, I can't give you a ink to a live page because I'm developing a Cordova mobile app...
Featured Post
PeopleSoft Adoption Made Smooth & Simple!
On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool. Claim Your Free WalkMe Account Now
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article was originally published on Monitis Blog, you can check it
here
.
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
- Web Development
- Magento
- Server Software
- Analytics
- Monitis
- Networking, *magento2, *Monitoring tool, *pageloader, *Monitoring Software
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month5 days, 12 hours left to enroll
705 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.