I'm trying to include an image above text, however it affects the text if I resize that image. Whatever I try to do, either it losses responsiveness or moves text under the screen (I have one page 'body' with hidden overflow). I managed to move an image to the center of the screen both in height and width without it affecting the text below, but changing it's width makes it non responsive and moves other elements. Any help?
In short: I want that image above the text, bigger, responsive and not affecting the text.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
why you don't use Bootstrap instead of CSS3? Like this for example:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Sample</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
<div class="row">
<div class="col-4">
<img class="img-fluid" src="https://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/59c4f5655bafe82c692a7052/gato-marron_0.jpg" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://dam.ngenespanol.com/wp-content/uploads/2019/02/gatos-caja-2.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
<div class="col-4">
<img class="img-fluid" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/10E9B/production/_109757296_gettyimages-1128004359.jpg" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
Because you are giving position absolute to .pagr_foto. And you didn't mention any css for image. By default image tag won't respect any other elements. So you have to mention style by your own.
.pagr_foto {
border-style: solid;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.pagr_foto_img{
width: 100%;
}
.container {
position: absolute;
left: 30%;
top: 64%;
max-width: 70%;
}
.icon {
width:85px;
height: auto;
margin-left: 35%;
}
.rows {
display: flex;
flex-direction: row;
width: 80%;
max-width: 80%;
column-gap: 8px;
margin-left: 5%;
}
<div class="container">
<!--DIDELE FOTKE STARTS-->
<div class="pagr_foto">
<div class = "pagr_foto_remas">
<img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
</div>
</div>
<!--DIDELE FOTKE ENDS-->
<!--TEKSTAS PO APACIA STARTS-->
<div class = "fadein"> <!--FADE IN ANIMACIJA-->
<div class="container_text">
<div class = "rows">
<div class="feature">
<div style="display:flex;flex-direction:column">
<!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/group.png" class="icon" />
<h3>Watch or listen together</h3>
<p>
Start a session and invite your friends by sharing your friend code with them.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/list.png" class="icon" />
<h3>Build up the queue</h3>
<p>
Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
</p>
</div>
</div>
<div class="feature">
<div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
<img src="assets/images/chat.png" class="icon" />
<h3>Use enhanced features</h3>
<p>
New features are added on top of streaming websites such as real-time chat and timestamp markers.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have 3 images which are not the same size in Desktop format, how do I get the same size? Then in mobile format I would like it to overlap by taking the entire width.
I tried with flex-direction: column but it doesn't work. I use flexbox for my code.
.background-color {
background-color: #f05f40;
}
h2 {
text-align: center;
padding-top: 2%;
margin-top: 0;
}
.row {
display: flex;
width: 100%;
text-align: center;
}
.content {
justify-content: space-around;
padding: 0 10px;
}
img {
height: 200px;
object-fit: cover;
object-position: center center;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
<div class="background-color">
<h2 id="projets">Mes Projets</h2>
<div class="row">
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/pain.jpg" alt="Bred" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/catmash.jpg" alt="catmash" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
<div class="column">
<div class="content">
<img class="img" src="/assets/img/projectImage/snakgame.jpg" alt="snakegame" style="width: 100%;">
<h3>My Work</h3>
<p>Lorem ipsum..</p>
</div>
</div>
</div>
</div>
You are add flex-direction: column inside .content which doesn't have display: flex. Instead you need to add in .row which wraps all three contents
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.content {
flex-direction: column;
}
}
Take a look at this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>3 Images responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" style="width:100%">
</div>
</div>
</div>
</div>
</body>
</html>
You would achieve the same size for all images by setting the width and height to the same value. I normally just resize all images in a image editing software such as Photoshop and then just import them. Saves you the work with sizing in CSS.
I am trying to insert 8 images and a button in a div in a bootstrap Joomla template. I need the images to be vertically aligned in the centre and horizontally evenly aligned over the with in all responsive views (mobile, tablet, small laptop, large screen with max 1920px of with). This is my test website:
webdisenjo.nl and the logo div is "moduletable logos_home"
I am struggling with what the with of the image should be and how to place them in the div.
Now, I have tried this class.
<div class="logo-inline-div"><img src="images/logo/Logo_3WO.png" /></div>
but it does not work well.
I have also tried this class
<div class="row"><div class="col-8"></div></div>
.col-8{width: 10%;}
But that also does not work.
I have cleanup your code a bit and added class clients-section
so just try to add below html inside of your logos_home and use this css and it would look like this
<div class="custom logos_home">
<div class="row clients-section">
<div class=""><img src="/images/logo/Logo_3WO.png" alt="pubblikvos Logo_3WO"></div>
<div class=""><img src="/images/logo/Logo_ACP.png" alt="pubblikvos Logo_ACP"></div>
<div class=""><img src="/images/logo/Logo_Amvest.png" alt="pubblikvos Logo_Amvest"></div>
<div class=""><img src="/images/logo/Logo_CBRE.png" alt="pubblikvos Logo_CBRE.png"></div>
<div class=""><img src="/images/logo/Logo_Fine-Hotels-Suites.png" alt="pubblikvos Logo_Fine-Hotels-Suites"></div>
<div class=""><img src="/images/logo/Logo_Greystar.png" alt="pubblikvos Logo_Greystar"></div>
<div class=""><img src="/images/logo/Logo_MiCompany.png" alt="pubblikvos Logo_MiCompany"></div>
<div class=""><img src="/images/logo/logo_NS.png" alt="pubblikvos logo_NS"></div>
</div>
<div><a class="knop_alle-clienten" href="/nl/projecten">Alle clienten</a></div>
</div>
.clients-section {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
.logos_home {
text-align: center;
}
a.knop_alle-clienten {
margin: 40px 0 0;
display: inline-block;
}
div.logo-inline-div {
text-align: center;
margin: auto;
padding: 16px 24px 10px 10px;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.col-1 {
width: 12.4%;
}
img {
width: 100px;
height: 200px;
object-fit: cover;
}
#media screen and (max-width: 680px) {
.col-1 {
width: 100%;
margin: 0;
}
div.logo-inline-div {
padding: 5px;
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="EightImages.css" />
<link rel="images" href="images" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg"/>
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
</div>
</div>
</body>
</html>
If you have a set of photos are in one div and you want them to be always same size whenever you want to resize the screen, you need either to have those images to be same size or you have to force them to be same size.
you can easily wrap the images with a div then give it a display:flex; and flex-wrap:wrap;
then give the images some width: for example if you want 4 photos per row give each image width of 25%.
I am making a website (brickman.glitch.me) and have a scroll button. How can I make it scroll down to what seems like a different page?
I've tried using the section tag, but I'm not the most experience so I've become stuck.
<section class="company-heading intro-type" id="parallax-one">
<div class="container">
<div class="row product-title-info">
<div class="col-md-12">
<a class="ct-btn-scroll ct-js-btn-scroll" href="#section2"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
</div>
</div>
</div>
<div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/anchor/company-hero2.jpg);"></div>
</section>
<div class="main">
<section id="section2">
<div class="container jumbo">
<div class="jumbotron">
<p1>test</p1>
I want to make this so it scrolls down to a page where it's got a different background etc, so it looks like a different page. I have an example from a friend's website (questallation.glitch.me) where the button scrolls down. I would like to try make something similar to this. Any help?
Thanks in advance.
To automatically scroll to another section you can use href="x" where x is the id of the section you want to scroll to.
Here is a small example:
<div style="background-color: green;height: 2000px">
<a href="#next-section">Hello</>
</div>
<div id="next-section" style="background-color: red; height: 2000px">
</div>
Have you looked at scroll-behavior: smooth? There is no iOS Safari support, but there is a polyfill.
From MDN
The scroll-behavior CSS property sets the behavior for a scrolling
box when scrolling is triggered by the navigation or CSSOM scrolling
APIs.
body {
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
nav {
background-color: #000;
display: block;
padding: 1em 0;
text-align: center;
}
nav a {
color: #fff;
margin: 0 1em;
text-decoration: none;
}
.scrolling-box {
background-color: #eaeaea;
display: block;
flex-grow: 1;
overflow-y: scroll;
scroll-behavior: smooth;
text-align: center;
width: 100vw;
}
section {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<nav>
1
2
3
</nav>
<div class="scrolling-box">
<section id="1">Section 1</section>
<section id="2">Section 2</section>
<section id="3">Section 3</section>
</div>
jsFiddle
I worked on your original source code, so this simple solution is based exactly on your example. Btw it works also on mobile. I took the section content from your friend's website, you can put whatever
<html lang="en">
<head>
<title>Brickman Development: Work In Progress</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrickpfp.png?1553388536776" type="image/x-icon">
</head>
<body>
<div style="width: 100%; height: 100%; background: url('https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrick.png?1553389376285'); background-position: 48% 41%; position:relative;">
<h1 class="line-1 anim-typewriter">
<mark>Brickman Development: Work In Progress</mark>
</h1>
<section class="company-heading intro-type" id="parallax-one">
<div class="parallax" id="parallax-cta" style="background-image: url('https://www.solodev.com/assets/anchor/company-hero2.jpg');">
</div>
<div class="container">
<div class="row product-title-info">
<div style="background: #191a1d; position: absolute; bottom: 0; left: 50%" class="col-md-12">
<a class="ct-btn-scroll ct-js-btn-scroll" href="#information"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
</div>
</div>
</div>
</section>
</div>
<section style="font-size: 38px" class="container">
<div class="box-container primary row">
<div class="one-full column">
<h1 id="information"> About myself:</h1>
</div>
<div class="one-full column">
<h6>
I am Questallation, I started as a tiny bot that provided some utility commands, and some fun commands for my developer's server.
Later on, my developer decided to work on the me to have it to specialise in one server. After a few friends
wanted to me on thier servers, my developer changed the bot completely, and gave me a new name; Questallation.
I have joined many new servers, and grown since, to what you see me today.
</h6>
</div>
</div>
<div class="box-container secondary row">
<div class="one-full column">
<h1> Commands:</h1>
</div>
<div class="one-full column">
<h6>Please, come and see my commands,
over here.
</h6>
</div>
</div>
<div class="box-container primary row">
<div class="one-full column">
<h1> Credits:</h1>
</div>
<div class="one-full column">
<h6>Theese people helped to improve me, over the times which I have lived:
People over here.
</h6>
</div>
</div>
</div>
</section>
<br/>
<footer class="center box-container secondary">
<p class="no-margin"> Questallation | Excigma is not affiliated with discord in any way whatsoever |
CSS framework
</p>
</footer>
</body>
</html>
Good day, as the title says, I am having issues with aligning the text in the exact center of my image. I tried adding a class with the css vertical-align:middle with no effect. Also, I tried using the span class to surround the text that will be centered. Both the image and the text are encased in a bootstrap grid. Any help will be appreciated thank you.
HTML/Bootstrap:
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
CSS:
.align_text {
vertical-align: middle;
}
Considering you are using bootstrap4, you can achieve that using the class .align-items-center, or use display:flex as stated by others :)
img {
background: gray;
height: 250px;
display: block;
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-3">
<img src="img/mission-mywhitecard.jpg" class="img-responsive align_text">
</div>
<div class="col-9 justify_text">
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and
friendly access to health, wellness and beauty.”</p>
</div>
</div>
</div>
I believe this produces what you ask for. It is using 2 flexboxes:
First one (.row) to put the image and text next to each other in a responsive way;
Second one (.col-md-9) to position the span in the center
html,
body {
width: 100%;
}
.row {
display: flex;
width: 100%;
}
.row>* {
flex: 1; /* Allow the flex items to grow and shrink */
}
.col-md-9 {
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/100x300" class="img-responsive align_text">
</div>
<div class="col-md-9">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
You can aslo use align-self-center in column div class without any height of image and other css also add larger image no design change when you use align-self-center in column div no need set image height
.align_text {
vertical-align: middle;
}
img {
max-width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<img src="http://placekitten.com/1000/500" class="img-responsive align_text">
</div>
<div class="col-md-9 justify_text align-self-center">
<span>
<h2 class="med_bg">OUR MISSION</h2>
<p class="mv_font">“To provide a mutually-beneficial platform for partners through high-quality, lower cost and friendly access to health, wellness and beauty.”</p>
</span>
</div>
</div>
</div>
In my header I have three logos. I need to center those logoes, where there is a margin between them on around 100 - 140px. I did not know how to do that, so I solved it with putting a margin on 150px, with the result that the logos are not placed on mobile devices.
On the mobile they should be vertical instead of horizontal.
I actually thought I could do it like this:
display: inline;
margin: 0 auto;
But that is not doing abything at all. Does anybody knows how I can solve this, so they also fit on mobile devices?
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-12 logo">
<!-- /.logo -->
<img src="/img/seminar/company_1-logo-white-small.png" alt="company_1" class="logo">
<img src="/img/seminar/company_2-white.png" alt="company_2">
<img src="/img/seminar/company_3-white.png" alt="company_3">
</div>
</div>
</div>
</div>
</div>
CSS
.logo {
margin: 20px 0 15px 0;
}
.logo img{
margin-left: 160px;
width: 163px;
}
Try to separate the row into 3 columns and place the images inside the column with bootstrap's text-center class. Bootstrap will align images vertically on mobile UI.
On iPad horizotal
On iPad vertical
On desktop browser
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<style type="text/css">
.logo {
margin: 20px 0 15px 0;
}
.logo img {
margin-left: 160px;
width: 163px;
}
</style>
</head>
<body>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
<div class="col-md-4 text-center">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="company_1" class="logo">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add this:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
You'll probably need to set a width on the .logo element and maybe `margin:0 auto;' too depending on its width.
For more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Live example:
.logo {
display:flex;
justify-content:center;
align-items:center;
}
.logo img {
margin-left:10px;
margin-right:10px;
}
<div class="logo">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
<img src="http://placekitten.com/200/100" alt="">
</div>