I'm using basic HTML, CSS and Javascript to create a simple web app. As I tried text-align: center and other CSS elements to center the button, I'm still having trouble.. I'm also trying to center a text inside the box center, but doesn't work for unknown reason. So far, I have used margin-left and margin-right to adjust the button but willing to know how to center it without going through all these hassle.
.image {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
margin-top: 40px;
margin-left: 50px;
}
.image img {
cursor: pointer;
}
.image img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image #mother img:hover {
border: solid 2px #1e88e5;
border-radius: 2px;
}
.image img {
width: 100px;
height: 100px;
text-align: center;
padding: 10px;
margin-left: 30%;
}
.button{
width: 80px;
height: 40px;
text-align: center;
margin: auto;
display: flex;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
.button:hover{
background-color: #242424;
}
.button:active{
background-color: #121212;
}
.button > span{
color: #eeeeee;
text-align: center;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Good Cop, Bad Cop</title>
<style>
.view-image img {
margin-left: 90px;
}
</style>
<link rel="stylesheet" href="../CSS/landing.css" />
<link rel="stylesheet" href="../CSS/coach_selection.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
</head>
<body>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<a class="navbar-brand" href="">
<img src="../IMAGES/Hamburger_icon.svg" alt="Character" height="35vh" />
</a>
<a href="settings.html">
<ul class="navbar-nav">
<img src="../IMAGES/bootstrap-icons-1.3.0/person-circle.svg" alt="Profile" height="45vh" />
</ul>
</a>
</div>
</nav>
<div class="image">
<div>
<button type="button" id="dog-button" class="btn btn-light">
<img src="../images/dog.png" id="dog" alt="dog">
</button>
</div>
<div>
<button type="button" id="mother-button" class="btn btn-light">
<img src="../images/mother.png" id="mother" alt="mother">
</button>
</div>
<div>
<button type="button" id="soldier-button" class="btn btn-light">
<img src="../images/military.png" id="soldier" alt="soldier">
</button>
</div>
<div>
<button type="button" id="teacher-button" class="btn btn-light">
<img src="../images/teacher.png" id="teacher" alt="teacher">
</button>
</div>
<div class="button" id="button-confirm">
<span>Confirm</span>
</div>
<div class="view-image" style="display:none;">
<img src="" width="150" height="150" />
<div class="button" id="button-other"><span>Other</span></div>
</div>
</div>
<div class="fixed-bottom">
<div class="navbar navbar-custom">
<div class="container-fluid">
<div id="grid">
<div class="bot-nav-img">
<a href="Journal/journal_main.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/book-fill.svg" alt="Journal" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="landing.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/house-door-fill.svg" alt="Home" height="40vh" />
</a>
</div>
<div class="bot-nav-img">
<a href="goals.html">
<img src="../IMAGES/bootstrap-icons-1.3.0/table.svg" alt="Goals" height="40vh" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
The quickest and easiest way to create a perfect centre alignment in css is with flexbox.
The general pattern is, give the parent element that needs it's children centered a display: flex;, a justify-content: center;, and a align-items: center;
For your code, get rid of the all the text-align. Then to the .button class, which is already display: flex, add justify-content: center; and align-items: center;
The span element with your text is a child of the button, so it will now become centered. The span element itself will not need any CSS properties to help it center.
.button {
width: 80px;
height: 40px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
padding-top: 8px;
padding-bottom: 8px;
background-color: rgb(43, 43, 219);
cursor: pointer;
border-radius: 2px;
}
Can you please check the below code? Hope it will work for you. You have to just add your button code outside the .image class and add margin to the button like
.button {
margin: 10px auto 0px;
}
Please refer to this link: https://jsfiddle.net/yudizsolutions/av9fn6tp/
This solution is working for me.
.button {
display : flex;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 0px auto 0px;
}
Related
Been using bootstrap to try and have this section of my web page to display the images properly while shrinking the web page. They stay in line which is good, seems the col / row method with bootstrap really came thru; how can I get these to shrink with the page so that they may stay in formation longer, and look better overall when the web page has shrunk significantly?
the styles
h1 {
font-weight: bold;
font-size: 40px;
background-color: #4aaaa5;
padding: 15px;
color: #ffffff !important;
}
h2 {
font-size: 25px;
Color: #4aaaa5;
padding: 20px 20px 5px 20px;
}
#foot {
border-style: solid;
border-width: 10px 0px 0px 0px;
border-color: #4aaaa5;
padding-top: 20px;
color: #cccccc;
background-color: #666666;
text-align: center;
margin-top: auto;
}
.left {
display: inline-block;
position: relative;
padding: 0px;
margin: 20px;
}
h3{
position: absolute;
bottom: 5px;
font-size: 25px;
background-color: #4aaaa5;
padding: 15px 0px;
width: 100%;
color: #ffffff;
text-align: center;
}
body {
background-image: url("./hotel-wallpaper/hotel-wallpaper.png");
display: flex;
height: 100vh;
flex-direction: column;
}
.main{
display: block;
margin-top: 50px;
margin-bottom: 150px;
padding: 20px 20px 40px 20px;
background-color: #ffffff;
}
.borderr {
border-right: 2px solid #cccccc;
}
hr {
margin: 20px 0px 20px 0;
height: 1px;
border: 0px;
border-top: 3px solid #cccccc;
}
p {
margin-top: 20px;
line-height: 30px;
}
the html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./assets/reset.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/Style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h1 class="navbar-brand"> My Name </h1>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item borderr">
<a class="nav-link" href="./index.html"> About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active borderr">
<a class="nav-link" href="./portfolio.html">Portfolio</a>
</li>
<li class="nav-nav-link">
<a class="nav-link" href="./contact.html">
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="main container col-xl-7 col-lg-8 col-md-9 col-sm-10">
<h2> Portfolio </h2>
<hr>
<div class="row">
<div class="left">
<img src="https://www.peta.org/wp-content/uploads/2017/05/Kenny-4-602x399.jpg" alt="White Liger" width="100%" height="100%"
style="max-width: 300px; max-height: 200px;">
<h3> liger </h3>
</div>
<div class="left">
<img src="https://twistedsifter.files.wordpress.com/2012/01/savannah_cat_closeup.jpg?w=800&h=507&zoom=2"
alt="Savannah" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Savannah</h3>
</div>
<div class="left">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/XJ-B1_Beefalo.jpg/1920px-XJ-B1_Beefalo.jpg"
alt="Beefalo" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Beefalo </h3>
</div>
<div class="left">
<div class="pic">
<img src="https://shoeuntied.files.wordpress.com/2017/12/rama2.jpg" alt="Cama" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3>Lama camel</h3>
</div>
</div>
<div class="left">
<img src="https://i0.wp.com/metro.co.uk/wp-content/uploads/2018/11/sei_38307333-0b17.jpg?quality=90&strip=all&zoom=1&resize=644%2C471&ssl=1"
alt="Zonkey" width="100%" height="100%" style="max-width: 300px; max-height: 200px;">
<h3> Zonkey</h3>
</div>
</div>
</div>
</main>
<footer id="foot">
Copyright ©
</footer>
</body>
</html>
Thanks -
use Col-md-(media-dependent-length) for setting up row div length with image width full to 100%
Check Bootstrap Docs
Add class="img-fluid" to the image tag as :
<img class="img-fluid">
This will make images responsive which therefore shrink and expand based on the window size. Also, setting max-height and max-width as per your code will fix the max size.
But while shrinking the window size, it will reduce the size.
Regarding the images, refer this link from the official documentation of bootstrap.
I want to decrease the space between "pricing", "how it works" and "features", as you can see here
I also know I can do that with margin but I tried a lot of different ways and it just don't come to mind on how to do that, so, it'd great if you could give me a hand.
<!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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin:15px 32px 0px 5px;
}
.nav-link{
position: relative;
float:right;
padding: 24px 40px 15px 20px;
}
#hero{
margin-top: 90px;
text-align: center;
}
#header{
overflow: hidden;
}
#email{
max-width: 275px;
width: 100%;
box-sizing: border-box;
padding:5px;
}
#form{
text-align: -webkit-center;
display: flex;
flex-direction: column;
}
.btn{
margin-top:13px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 150px;
width: 100%;
height: 30px;
background-color: #f1c40f;
padding: 0 20px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px;
border-radius: 2px;
cursor: pointer;
}
.flex{
display:flex;
margin-top: 80px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
.desc{
display: flex;
flex-direction: column;
justify-content: unset;
height: 125px;
width: 80vw;
padding: 41px 0px 0px 0px;
text-align: start;
}
.eighttwo, p{
padding: 0;
margin: 0;
}
.divisor{
margin-top: -40px;
}
.container{
width:100%;
max-width: 1000px;
}
a{
text-decoration: none;
color: #000;
}
#nav-bar{
display: flex;
background: #eee;
flex-direction: row;
}
#media screen and (max-width: 410px) {
#nav-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
margin-top: 30px;
padding: 0 50px;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
<form id="form">
<input id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Get Started" class="btn">
<div class="container">
<section id="features">
<div class="flex two">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-battery-full"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
<section id="how-it-works">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</section>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
If you use justify-content: space-between; for your flex container and margin-left: auto; on the first of your links, the links will be moved as far right as their size and padding allows - see below. (BTW: Erase the float: left - it has no effect for flex items)
#nav-bar {
display: flex;
background: #eee;
flex-direction: row;
justify-content: space-between;
}
.nav-link {
padding: 24px 40px 15px 20px;
}
.nav-link:first-of-type {
margin-left: auto;
}
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
I am trying to achieve the following: I am using bootstrap, standard btn class.
So far I the background image is kind of in the correct position, but it gets cut off. I've tried overflow: visible; etc...
.btn {
background: url('../images/button.svg') no-repeat;
background-repeat: no-repeat;
background-position: left;
padding-left: 80px;
}
<button class="btn btn-default btn-lg">GET A FREE QUOTE <i class="fa fa-chevron-right" aria-hidden="true"></i></button>
Thanks for any help
Hello you can use this code below, I have uploaded your png file to mediafire. I also removed the background of your image. Here is the link: http://www.mediafire.com/view/ddv9ce54d08488m/Ky5ME_burned.png
<!DOCTYPE html>
<html>
<head>
<a href="http://google.com">
<input type="image" src="Ky5ME_burned.png" alt="Submit" width="660" height="174">
</a>
</head>
</html>
.btn_button, .btn_button:hover, .btn_button:focus{
background: orange;
color: blue;
margin-left: -10px;
margin-top: 3px;
width: 150px;
outline: none;
}
.round_div{
display: flex;
}
.round2:before{
content: "\25cf";
font-size: 14px;
padding: 0px 3px;
border: 4px solid #000;
border-radius: 50%;
}
.round1{
border: 10px solid orange;
border-radius: 50%;
}
.glyphicon_right_arrow{
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="col-xs-12 form-group"></div>
<div class="col-xs-12">
<div class="round_div">
<div class="">
<div class="round">
<div class="round1">
<span class="round2"></span>
</div>
</div>
</div>
<div class="">
<button class="btn btn_button" value="">MORE ABOUT US
<span class="glyphicon glyphicon-chevron-right glyphicon_right_arrow"></span></button>
</div>
</div>
</div>
I have the mobile version of a static page looking good (although I am not sure if the HTML setup is ideal). I took the button out of the the .product-info class so I could use flexbox's order property and move it to below the product image on mobile. However, this leaves me unsure of how to go about styling the desktop version. I'm trying to get .product-info (blue), the 'get' button, and .store-info (green) each on their own separate lines. What is the best way to structure and style for the desktop version using flexbox without affecting the mobile layout? Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snapshelf</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="product-page.css" type="text/css">
</head>
<body>
<!-- Navigation -->
<nav class="header navbar navbar-light bg-faded">
<div class="nav navbar-nav container">
<a class="nav-item nav-link active" href="#">Snapshelf <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#" style="float: right">Store Account</a>
</div>
</nav>
<!-- Holds product image and information -->
<div class="product container">
<!-- Displays front or back of product -->
<div class="product-image">
<img src="front.jpg" class="main-image img-fluid" alt="" />
<img src="back.jpg" class="secondary-image" alt=""/>
</div>
<!-- Displays product information -->
<div class="product-info">
<p class="brand-name"><b>Brand Name</b></p>
<p class="product-desc">Product Name</p>
<p class="price">$100</p>
</div>
<!-- Get button -->
<div>
<button class="get-button btn btn-default btn-lg">Get</button>
</div>
<!-- Store information -->
<div class="store-info">
<div>
<b>From</b><br>
Store Name
</div>
<div style="margin-top: 10px">
<b>Where</b><br>
Store Location<br>
www.storeurl.com
</div>
</div>
</div>
</body>
</html>
CSS
/* Large screens */
#media only screen and (min-width: 768px) {
.body {
font-family: 'Roboto', sans-serif;
}
.header {
margin-bottom: 40px;
border: 1px solid green;
}
.product {
display: flex;
border: 1px solid red;
}
.product-info {
border: 1px solid blue;
}
.get-button {
margin-top: 20px;
border-radius: 2px;
}
.product-image {
display: flex;
flex-direction: column;
}
.main-image {
height: 500px;
width: 500px;
margin-right: 20px;
}
.secondary-image {
height: 150px;
width: 150px;
margin-top: 20px;
}
.price {
margin-top: 10px
}
.store-info {
border: 1px solid green;
border-radius: 2px;
padding: 10px;
margin-top: 40px;
text-align: center
}
}
Just set your flexbox container to flex-direction: column in your desktop media query.
#media only screen and (min-width: 768px) {
.product {
display: flex;
flex-direction: column;
border: 1px solid red;
}
}
I'm trying to center an image but it doesn't works :(
I use the parameter text-align: center;. The size of the image is 600x600px and I need to center horizontal in the website.
My code is:
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
width: 600px;
height: 600px;
display: block;
margin: 0 auto
text-align: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
At moment it shows:
Could you help me?
Thanks!
try this code for the .img-sugarCSS:
.img-sugar{
width: 600px;
height: 600px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
try this css, you have some syntax error and spelling mistake
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCam UI</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="http://placehold.it/350x150"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
</body>
If you would insert your img via css it would be easiely done with this here:
.img{
background:url(yourimg.png) center center no-repeat;
}
margin: 0 auto you forgot to end with semicolon ;
.img-sugar{
width: 600px;
weight: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
Use the below mentioned Padding value.
#share-buttons img {
width: 50px;
padding: 100px;
border: 0;
box-shadow: 0;
display: inline;
}
try with this code
.img-sugar{
width: 600px;
weight: 600px;
display: block;
position: absolute;
vertical-align: center;
horizontal-align: center;
}
maybe this works?