this is something I thought would be straightforward but turning out to be a bit of a pain. I am trying to center align the Facebook social buttons underneath an icon, you can see it here:
Demo Fiddle
I am a bit stuck for ideas, I have tried forcing it within a div and still will not budge...
<div class="Facebook"><img src="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-icon-png-white.png" width="30"/>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FRazorRuddockRacing%3Ffref%3Dts&width&layout=button_count&action=recommend&show_faces=false&share=false&height=21&appId=637719322983790" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; display: block; margin: 0 auto;" allowTransparency="true"></iframe>
</div>
.Facebook{
float: left;
background-color: #3B5998;
width: 50%;
text-align:center;
padding: 20px 0;
}
Adding this will work:
iframe {
display: block;
width: 125px;
margin: auto;
}
However, as more digits are added to the like, your width would need to get bigger too. This isn't really a great solution, but without setting the width you can't really set margin to auto to get this to work.
The Facebook social button is always 124px wide. Just give the iframe a width and center it.
iframe {
width: 124px;
text-align: center;
}
http://jsfiddle.net/ak2om8Lh/1/
Wrap the iframe into a div and add a margin: auto
to center it without changing the containing div width,
that gives you more freedom to position your element.
.frame{
display: block;
width: 100px;
margin: auto;
}
Related
I'm a beginner at CSS and HTML so I'm sure this is a mess. But what I'm trying to do is center 3 images side by side in a horizontal center in CSS. I've tried different solutions have gotten them to align properly but they still stay stuck to the left of the page or will stack on top of each other (and sometimes overlap).
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
And my CSS:
#imagesMain{
display: inline-block;
position:relative;
padding: 0;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:center;
}
#imagesMain img{
height: 400px;
width: 300px;
vertical-align: center;
}
The images by default are huge. the 2nd CSS block resizes them but I can't get them to do much else. Any ideas?
You can use the almost same CSS, but with one simple correction, change:
vertical-align: middle;
And remove these:
display: inline-block;
position: relative;
There's no center here. It must be middle. Please correct it. And remove display: inline-block from the <div>. Your final code should be like:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
}
#imagesMain img {
height: 400px;
width: 300px;
vertical-align: middle;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
Click on Run Code Snippet and press Full Page to check if this is what you are expecting.
Try changing display: inline-block to display: block (as well as removing margin-left: auto; margin-right: auto;. If you're ok with #imagesMain taking up 100% of the width of the screen, with the images centered inside, this will work fine.
try learing flexbox because it has many uses for nicely aligning items and content.
it also keeps your css very small.
if you would like to keep them centered al the time. you should use justify-content: center;
#imagesMain{
display: flex;
justify-content: center;
}
#imagesMain img{
height: 400px;
width: 300px;
margin: 0 10px;
}
<div id="imagesMain">
<img src="IMG_20140930_140020.jpg">
<img src="IMG_20140922_164619.jpg">
<img src="IMG_20140608_181811.jpg">
</div>
for alternative uses look at css tricks they give good examples for how to use flexbox.
Probably your problem is the container, because the image are correct align to the center, I have simplify your code and colored the container and images:
#imagesMain{
position:relative;
display: inline-block;
width:100%;
height:250px;
margin-top:20px;
background-color:red;
text-align:center;
}
#imagesMain img{
background-color:blue;
height: 200px;
width: 150px;
margin-left:-4px; /* trick for remove the space beetwen */
}
https://jsfiddle.net/bcpph0pp/1/
UPDATE
Reading other comments I think you want all aligned in the middle, this is a good resource for generate the code for FLEX BOX: http://the-echoplex.net/flexyboxes/
And this is the example: https://jsfiddle.net/bcpph0pp/2/
I am using HTML and CSS.
I can't display all of my content in the middle of the screen for varying display sizes.
I have attempted to use % in place of PX but it's unsuitable for small screen size such as 800*600 pixels.
Also I have performed web searches but my lack of in-depth knowledge of HTML is hindering my progress.
my code is this:
<style type="text/css">
#Line5
{
color: #7B7BC0;
background-color: #7B7BC0;
border-width: 0px;
}
#wb_Text1
{
background-color: transparent;
border: 0px #8B8B00 solid;
padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
can someone correct this piece of code for me?
Don't know what your desired output is like. But check this out.
Click Here for Demo
<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>
Here updated code and its working fine.
<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
Not clear about your question but I think Either of the examples below could work for you ;
if you want it to be standards compliant, use this in your stylesheet:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
the body thing makes it work in IE, the margin:0 auto; makes it center in most other browsers.
you might have to go in and reset some of your main containers to text-align:left; because the body text-align:center sometimes cascades down into the site content, but you can counteract that by adding
text-align:left;
to #mainContainer
Or,
There may be better methods, but this works in all browsers so far :
body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
or set body width to 100% and then just make a container div for your page
#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
Also not quite sure what you're asking for. I'm interpreting it as you wanting the div to be centered vertically and horizontally, so that's what I'm going for.
HTML
<div id="wb_Text1">
<b>SAMPLE TEXT</b>
</div>
CSS
body {
height: 100%;
width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
height: 93px; //or whatever height you want
width: 300px; //or whatever width you want (can be in %)
background-color: #7B7BC0;
border: 0px;
padding: 0px;
font: 32px Arial;
line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
color: #fff;
text-align:center;
margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}
Here's what's happening inside the calc():
50% gives you half the total height of the page,
46.5px is half of the div's height, which in this case is 93,
50% - 46.5px gives you the amount of space needed to center the div vertically
Fiddle here: http://jsfiddle.net/Shiazure/hA9KB/
i thank all those who helped me. Problem was solved by adding the following code.
<style type="text/css">
div#container
{
width: 990px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
....
.....
........
<body>
<div id="container">
...
....
Thank you so much that help a rookie !
I wanted my left right content be centered after zooming in 500% plus on the web page, I have tried so many ways, but still don't have an answer can anyone give me a hand here please.
copy and paste to make a new webpage, you can't see if you paste on fiddle or codewall.
html:
<body>
<div id="lower_body">
<h1>center content</h1>
<div id="outer_warpper">
<div id="outer">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
</div>
</div>
</body>
CSS:
#lower-body {
margin: 0px;
padding: 0px;
}
#outer_warpper {
width: 100%;
height: 100%;
margin: 0px;
padding-top: 2%;
padding-bottom: 2%;
background-color: yellow;
overflow: hidden;
}
#outer {
background-color: black;
text-align: center;
vertical-align: middle;
display: table;
margin:0px auto;
overflow: hidden;
}
#right {
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
#left{
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: grey;
}
img{
widht:100%;
height:100%;
}
h1{
text-align: center;
}
as you can see when it reach 500% (ctrl+mouse scroll), the left and right text is not in the center any more, because it push to left somehow.
can one help me make it? Thank for helping. I had tried the width:% also dont work, some one say it need to be done in #media.
This is a normal behavior...
Your two divs are positioned relatively next to each other. If they can't fit the one next to the other then the second one will reposition itself underneath the first one...
if you REALLY want to make it work on 500% zoom what you can do is:
Resize your divs (example)
Use % widths (example2)
Personally i would go with my second example. The choice though is yours (depending always on why you need to achieve this)
PS: % width was not working because you were using display:table; on the #outer div
This is not a problem or even a bug, it's just the normal behavior of the browser. It's just too much zoom to keep any consistency. I think 400% is the max in this case. If you try it in FireFox, you won't get this problem because it doesn't go till 500%.
It's pretty good to be concerned about zooming in a web page, but 500% is just too much to any page work fine.
I am practising with making a webpage responsive for mobile screen resolutions. I succeeded with the width. How do I manage this with height? My wrappers continues to stay on top instead of vertical align.
I've seen a lot of questions about this problem, but couldn't find a solution specified on my css yet. Hope someone can help me out.
HTML
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="content">
<div id="topleftbox"></div>
<div id="toprightbox"></div>
<div id="bottomleftbox"></div>
<div id="bottomrightbox"></div>
</div>
</div>
CSS
body {
}
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
.header {
min-width: 50%;
height: 20px;
}
.content {
min-width: 500px;
width: 40%;
height: auto;
margin: 0 auto;
}
#topleftbox {
background: url(..);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: left;
}
#toprightbox {
background: url(...);
background-repeat: no-repeat;
width: 229px;
height: 228px;
float: right;
}
etc.
To use display:table-cell; you need to simulate the full table structure. Luckily you won't have to add any extra markup since you can style against the html and body tags:
html{display:table;width:100%;height:100%;}
body{display:table-row;}
.wrapper{
display:table-cell;
vertical-align:middle;
text-align:center;
}
Note: this vertically centers .wrapper's content, not the div itself.
You could use display:table to render your DIVs like tables and table cells.
More here: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Unlike with centering horizontally there never has been a CSS way to center vertically. The only way is to use javascript to grab the "window.innerHeight" then add the height of the HTML element (wrapper) to it and divide the total in half. And set that as the new top position.
Also your "wrapper" has a height of 100% this should mean it fills the entire screen height. It will not center if it is the same height as the screen. Also it has a width of 100%, I doubt the "margin: 0 auto" is doing anything.
Vertical align within CSS has a few options:
1. Via table-cell. (This does work in IE8+)
{
display:table-cell;
vertical-align:middle;
}
2. line-height = height of element (If you have more than one line of text this will look funky I imagine)
{
height:10em;
line-height:10em;
}
There are more options you can find, but I believe display: table should be your best bet nowadays.
http://www.zann-marketing.com/.../vertically-centering-text-using-css.html
https://stackoverflow.com/questions/2939914/
We've manually programmed Twitter, Facebook and G+ buttons on our site which uses responsive design in a ajax portfolio. They all align with each other perfectly but the problem is we want all 3 to be centred no matter what the size of the surrounding container.
In my head this should work easily with a surrounding Div that has 100% width to expand to the portfolio size, inside that another Div which has margin-left and margin-right as auto which floats centrally to the 100% width div and then inside of that div the containers for the buttons. However for some reason they always hard align to the left. Here is my code at the moment.
Here is an example
http://themixtapesite.com/#/joe-budden-a-lose-quarter
now change your browser window to make it smaller so you can dynamically see all the different sizes - I want those social buttons to float centred in the middle rather than on the left like they are now..
<!-- Social sharing buttons -->
<div class="social-single">
<div class="social-centre">
<div class="twit-button">Tweet</div>
<div class="fb-button"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php wp_title( '|', true, 'right' ); ?>&send=false&layout=button_count&width=71&show_faces=false&action=like&colorscheme=light&font&height=21&appId=118471234925480" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 71px; height: 21px;" allowTransparency="true"></iframe>
</div>
<div class="gplus-button"><g:plusone href="<?php echo urlencode(get_permalink($post->ID)); ?>" size="medium" annotation="bubble" width="50px"></g:plusone></div>
</div> </div>
And the CSS
/* Social Buttons */
.social-single {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
width: 100% !important;
}
.social-centre
{
margin-left: auto;
margin-right: auto;
}
.twit-button {
float: left;
margin: 0;
margin-right: 5px;
width: 80px;
}
.fb-button {
float: left;
margin: 0;
width: 80px;
}
.gplus-button {
float: left;
margin: 0;
width: 50px;
}
You have already used margin-left: auto; and margin-right:auto; it is good.
You have all things set in the way of responsiveness.
But one thing that browser checks for every element, its width as well as height .
We should define these values separately, otherwise it'll assume it without having any child element inside it.
I've checked your code and as i think you will have to add only one thing - give .social-centre class width whatever you want but it would be good if it is in %'s for its responsiveness.
.social-centre
{
margin-left: auto;
margin-right: auto;
width:50%; //example, whatever you want.
}
And it'll work properly. Hope it'll help you.