I have this setup:
img {
max-height: 100%;
max-width: 200pt;
margin-left: 7.5pt;
margin-right: 7.5pt;
scroll-snap-align: center;
border-radius: 10pt;
}
img:first-child {
/*padding-left: 15pt;*/
margin-left: auto;
}
img:last-child {
/*padding-right: 100pt;*/
margin-right: auto;
}
.images {
background: orange;
padding-left: 30pt;
padding-right: 30pt;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin-top: 15pt;
margin-bottom: 15pt;
height: 200pt;
display: flex;
overflow-x: scroll;
}
.images::-webkit-scrollbar {
display: none;
}
<div style="min-height: 100%; min-width: 100%;">
<div class="images">
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
</div>
</div>
https://jsfiddle.net/ybdfu28a/
As you notice, the images div has a padding-left and padding-right of 30pt. This seems to work fine on the left side but not on the right. The right side's image sticks to the edge when you scroll horizontally.
What am I doing wrong?
EDIT: This is not a duplicate of the linked question as border doesn't work in my case as I explained in the comments.
Since your images div doesn't have a defined width, you can not place a padding on the right,
Here is a solution to add some space on the right of the last image
.images:last-child::after {
content: "";
padding-right: 30pt;
}
img {
max-height: 100%;
max-width: 200pt;
margin-left: 7.5pt;
margin-right: 7.5pt;
scroll-snap-align: center;
border-radius: 10pt;
}
img:first-child {
/*padding-left: 15pt;*/
margin-left: auto;
}
img:last-child {
/*padding-right: 100pt;*/
margin-right: auto;
}
.images {
background: orange;
padding-left: 30pt;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin-top: 15pt;
margin-bottom: 15pt;
height: 200pt;
display: flex;
overflow-x: scroll;
}
.images:last-child::after {
content: "";
padding-right: 30pt;
}
.images::-webkit-scrollbar {
display: none;
}
<div style="min-height: 100%; min-width: 100%;">
<div class="images">
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80" />
</div>
</div>
It seems you are doing nothing wrong. Apparently the combination of apply padding to a flex container with an overflow-x causes this unexpected behavior.
I checked your code and solved the problem by adding a parent div "container" with same paddings and margins than "images" div and I put "images" into "container" and I set height and width to 100%.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
img {
max-height: 100%;
max-width: 200pt;
margin-left: 7.5pt;
margin-right: 7.5pt;
scroll-snap-align: center;
border-radius: 10pt;
}
img:first-child {
/*padding-left: 15pt;*/
margin-left: auto;
}
img:last-child {
/*padding-right: 100pt;*/
margin-right: auto;
}
.images {
height: 100%;
width: 100%;
background: orange;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
display: flex;
overflow-x: scroll;
}
.images::-webkit-scrollbar {
display: none;
}
.content{
background: orange;
margin-top: 15pt;
margin-bottom: 15pt;
padding-left: 30pt;
padding-right: 30pt;
height: 200pt;
}
</style>
</head>
<body>
<div style="min-height: 100%; min-width: 100%;">
<div class="content">
<div class="images">
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
<img src="https://images.unsplash.com/photo-1594993082512-477197cedf34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80"/>
</div>
</div>
</div>
</body>
</html>
In this blog there are two more ways that you can try and also there is more information about it.
I hope this can help you.
Related
I have a custom cursor on my page, but it disappears when hovering into the screen. It will appear for a millisecond when moving the cursor from outside the window onto the body, then disappear. How can I get the custom cursor to work?
body {
font-family: "Quicksand", sans-serif;
margin: 0;
padding: 0;
cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}
main {
max-width: auto;
margin: auto;
cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}
footer {
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}
img {
max-width: 100%;
height: auto;
display: table;
margin-left: auto;
margin-right: auto;
cursor: url("https://via.placeholder.com/50x50/000/fff"), auto;
}
<main>
<section class="test">
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
</section>
</main>
<footer>
<p>Lasse Unke - 2022.</p>
</footer>
It looks like the cursor isn't displaying when you hover over the text.
I hope this is your problem.
I set the cursor for * to the custom cursor and set it to !important
EDIT: For some reason the cursor isn't working in the snippet. Here is a jsfiddle link: https://jsfiddle.net/odajb362/
body {
font-family: "Quicksand", sans-serif;
margin: 0;
padding: 0;
}
main {
max-width: auto;
margin: auto;
}
footer {
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
img {
max-width: 100%;
height: auto;
display: table;
margin-left: auto;
margin-right: auto;
}
* {
cursor: url("https://via.placeholder.com/50x50/000/fff"), auto !important;
}
<main>
<section class="test">
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
<img src="https://via.placeholder.com/200x100" alt="test" />
</section>
</main>
<footer>
<p>Lasse Unke - 2022.</p>
</footer>
Hope this solves your problem 🙂
Have a nice day
I'm trying to make a home page where there is 6 blocks of images with 3 columns. But also want those 6 blocks to show as 2 columns on mobile view.
I have attached some images of what I want it to look like and my code that I'm using. I've tried different types of flex-wrap but I'm not getting it to work properly.
Here is the link to jsfiddle - https://jsfiddle.net/7frjmeat/
Here is the current desktop view
Here is what I'm hoping for the mobile view to look like -
Code
html,
body,
a,
{
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
}
.flex div {
flex: 1;
padding: 2px;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
<div class="line-break"></div>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
So you need to put all of the elements inside of one flex box to really have it effect the whole group. Additionally you need to set break-points for CSS to know how many items are in a row. I generally just use min-width.
Basically set a width on items, used box-sizing to include the padding in the width, used flex-wrap to wrap content, and changed the width on the mobile version to be a two column layout. **Edit I also altered the HTML to put everything in one flex-box container.
Here's the code working for your layout. Granted it loses the HR tag.
CSS
html,
body,
a {
width: 100%;
height: 100%;
margin: 0;
}
p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 200%;
}
hr {
width: 25%;
height: 1px;
background: #c6c6c6;
border: none;
outline: none;
margin-bottom: 0.25%;
}
.logo {
text-align: center;
width: 20%;
height: auto;
}
.logo img {
width: 100%;
height: auto;
padding-top: 4%;
}
.flex {
display: flex;
max-width: 75%;
width: 100%;
height: 100%;
flex-wrap: wrap;
flex-basis: auto;
justify-content: space-evenly;
}
.flex div {
flex: 1;
padding: 2px;
min-width: 33%;
box-sizing: border-box;
}
.img1 {
width: 100%;
transition: all 0.3s;
padding-top: 5%;
}
.img1:hover {
transform: scale(1.03);
}
.line-break {
width: 100%;
}
#media only screen and (max-width:768px) {
.logo,
.logo img {
display: inline;
width: 60%;
max-width: 100%;
padding: 0;
margin: 0;
}
.flex,
.flex div,
.img1,
img:hover {
transition: none !important;
transform: none !important;
max-width: 100%;
}
p {
font-size: 150%;
padding-bottom: 10px;
}
hr {
margin-bottom: 5%;
}
.line-break {
width: 0%;
}
.flex div {
min-width: 50%;
}
}
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<center>
<div class="logo">
<img src="https://via.placeholder.com/742x180" />
</div>
<hr>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" class="img1" />
</div>
</div>
</center>
If the width of a parent div is flexible, but the contents inside of a div don't have to be, you can use display: inline-block in the image class. This will help you get the effect that you want to achieve.
An example implementation would be
<div class="main-container">
<img class="inline-image" src="img1">
...
</div>
This is just a basic example; but you can achieve this behavior using either Flexbox or CSS Grid, depending on how exactly you want the items to arrange themselves.
Flexbox usually is better for one-dimensional layouts, that meaning, when you want items to be aligned in one direction (either columns or rows); while CSS Grid is a lot easier to handle two-dimensional layouts where you need items to be aligned in both directions.
Take a look:
body * {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
justify-content: center;
grid-gap: 15px;
grid-auto-rows: minmax(100px, auto);
}
.grid-item {
border: 1px solid black;
}
.flex {
width: 100%;
max-width: 650px;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 30%;
margin: 5px;
}
#media (max-width: 590px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.flex-item {
border: 1px solid blue;
min-height: 100px;
flex: 1 1 45%;
margin: 5px;
}
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
<div class="flex">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
I am stuck at the moment to put this 4 images (in the same row) inside of the div with image.
Html:
.iniciRo img {
width: 100%;
}
.iniciRo .coluna img {
width: 270px;
z-index: 4;
}
.iniciRo>div {
padding: 30px 0 10px 0;
}
.iniciRo .row>div {
padding-bottom: 20px;
}
.coluna {
position: relative;
padding-left: 15px;
padding-right: 15px;
float: left;
}
.row {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 75em;
}
<div class="iniciRo">
<img src="assets/images/Rodape/backbot.png">
<div>
<div class="row">
<div class="coluna">
<img src="assets/images/Rodape/visitas-escolas.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/rafc.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/rioavetv.png" />
</div>
<div class="coluna">
<img src="assets/images/Rodape/galeri.png" />
</div>
</div>
</div>
</div>
I already tried to use z-index but nothing happened.
Any help is going to be appreciated, please help me...
Like this:
coluna img {
position: relative;
padding: 50em;
}
.iniciRo img{
position: absolute;
width: 100%;
}
.iniciRo > div{
padding: 30px 0 10px 0;
}
.iniciRo .row > div{
padding-bottom: 20px;
}
.coluna{
position: relative;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 30em;
}
.row{
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 75em;
clear: both;
}
In other words you want position: absolute for the iniciRo img, position: relative for .row, and the use of flexbox for .row. Here's a JS Fiddle.
Use this Flexbox css code
<div class="flex-container">
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
<div>
<img src="https://placehold.it/350x150" />
</div>
</div>
.flex-container{
display:flex;
}
.flex-container div {
flex:1;
margin:5px;
}
img {
width:100%;
}
I would like to have my 4 social pictures (alt=test) in the center of my div (now they are appearing on the top center). I put text-align: center in .socials but it is not working. I also tried to put it in .socialdivs but it is also not working. The HTML and CSS code is below.
.socials {
width: 100%;
background-color: #5e6066;
text-align: center;
}
.socialdivs {
width: 100%;
margin: auto;
}
.fb {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover {
background-color: #4668b3;
}
.lin {
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover {
background-color: #00a0dc;
}
.insta {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover {
background-color: #405de6;
}
.golden {
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover {
background-color: #fcbf17;
}
.info {
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
Any help would be appreciated.
You can use line-height: 155px; to center it vertically. It needs to have the same height as the container. So, when the height of the container change, the line-height needs to be adjusted.
.socials
{
width:100%;
background-color: #5e6066;
text-align: center;
line-height: 155px;
}
.socialdivs
{
width: 100%;
margin: auto;
}
.fb
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.fb:hover
{
background-color: #4668b3;
}
.lin
{
display: inline-block;
width: 250px;
height: 155px;
margin-top: auto;
}
.lin:hover
{
background-color: #00a0dc;
}
.insta
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.insta:hover
{
background-color: #405de6;
}
.golden
{
display: inline-block;
width: 250px;
height: 155px;
margin: auto;
}
.golden:hover
{
background-color: #fcbf17;
}
.info
{
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 20px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<img src="img/facebook.png" alt="test" />
</div>
<div class="lin">
<img src="img/linkedin.png" alt="test" />
</div>
<div class="insta">
<img src="img/instagram.png" alt="test" />
</div>
<div class="golden">
<img src="img/goldenline.png" alt="test" />
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Adrian © 2017 Thank you for your visit!
</div>
</footer>
</html>
You can use padding to set text in middle of div,(along with text-align:center;) like this:
.socialdivs
{
padding: 10%;
font-size: 18px;
text-align:center;
width:20%;
}
padding and margin by default show a good result in anchor tag so use display block in it
I want to have a div with two images on the left, some centered text and some text on the right.
One of the many attempts:
http://jsfiddle.net/yu8bz4h4/
The problem is that I cant figure out how to get the p elements in the same line while keeping center and right the alignments
HTML:
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center" >centered</p>
<p class="right" >right</p>
</div>
CSS:
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
text-align: center;
width: auto;
}
.right {
text-align: right;
width: auto;
}
Replace all p with div.Then write css code.The text comes in one line.
Hope this works.
.outer {
height: 50px;
width: 800px;
}
.icon {
width: 44px;
height: 44px;
}
.outer p {
margin 0;
}
.center {
margin-left:50%;
width: auto;
position:absolute
}
.right {
margin-left:100%;
width: auto;
position: absolute;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<div class="center" >centered</div>
<div class="right" >right</div>
</div>
I am pretty much sure you wanted something like this. Though your question is not clear. Never forget to write codes with semantic meaning. Here's your solution following more semantic way: codepen.
Or here:
.outer {
height: 50px;
width: 800px;
overflow: hidden;
}
.column {
width: 33.33%;
float: left;
}
.icon {
width: 44px;
height: 44px;
margin-right: 10px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
<div class="outer">
<div class="column">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
</div>
<div class="column">
<p class="center">centered</p>
</div>
<div class="column">
<p class="right">right</p>
</div>
</div>
Revised code in response to OP's comments:
.outer {
height: 50px;
width: 300px;
position: relative;
}
.icon {
width: 44px;
height: 44px;
float: left;
}
.center {
text-align: center;
width: 100%;
position: absolute;
left: 0;
}
.right {
position: absolute;
right: 0;
width: auto;
}
<div class="outer">
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<img class="icon" src="http://www.mobafire.com/images/champion/icon/leona.png" />
<p class="center">centered</p>
<p class="right">right</p>
</div>