I try to center the social media buttons in a <div>, but it keeps on aligning left.
echo '<div class="socialWrapper">';
echo '<div class="fb-like" data-href=" ' . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></div> ';
echo '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<div class="g-plusone" data-size="medium"></div>';
echo '</div>';
CSS file
div.socialWrapper{
margin:auto;
width:100%;
text-align:center;
}
try div.socialWrapper{display: flex; justify-content: center; flex-direction: row;}
The parent <div>, socialWrapper, has a width of 100%, and will only appear centered by using margin: 0 auto if you give it a width of less than 100%.
<div> is a block-level element (its default behaviour is to be display as a block, so new elements will appear on a new line). Use <span> instead, because it is an inline element.
This means the nested <div> elements will need to be explicitly set as display: inline-block. (text-align: center will only be applied to elements whose default behaviour is display: inline, I think).
HTML/PHP
echo '<div class="socialWrapper">';
echo '<span class="fb-like" data-href=" ' . $_SERVER['REQUEST_URI'] . '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="true" data-share="true" style="vertical-align:top;zoom:1;*display:inline;"></span> ';
echo '<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> ';
echo '<span class="g-plusone" data-size="medium"></span>';
echo '</div>';
CSS
div.socialWrapper{
margin: 0 auto;
width: 50%;
text-align:center;
}
I made a CodePen demo for you:
See the Pen Social toolbar by Yvonne Aburrow (#vogelbeere) on CodePen.
I manage to center social icons through following code in css:
.wrapper{
margin: auto;
display: flex;
justify-content: center;
flex-direction: row;
max-width: 200px;
try this it worked for me.
(I set max-width to 200px because it suits to me best, you can use
different number or dont need to use att all but in that case icons are spreaded al the way through div width.)
Related
I am using WordPress and ACF to display some photographs from custom post types on my page.
I would like the images to all be the full height of the container but they may have different widths (context photography gallery) and I would like them to scroll horizontally
the images are currently contained as list items in an unordered list.
Im unsure how to accomplish this with CSS. so far I have them scrolling, but they are all different heights.
i could make sure the images are all just uploaded with a fixed height but that doesn't solve the problem of them not resizing with the browser.
JS Fiddle:
https://jsfiddle.net/svone2zq/9/
Live url: http://www.mattwilkinson.co.uk/beta/
HTML CODE
if( $posts ): ?>
<ul class="photolistul">
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<li class="photolistli">
<!-- need the right info here -->
<div class="photocontainer1">
<span><?php the_field('single_image_title'); ?></span>
<img class="img-responsive photo" src="<?php the_field('single_add_image') ?>" alt="<?php echo $image['alt']; ?>" />
</div>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
</div>
CSS
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
height: 80vh;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: inherit;
max-height: 100%;
max-width: 100%;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 img {
position: relative;
float: left;
max-height: 100% !important;
max-width: auto;
}
it looks like you want to create a carousel, if so I think the best solution would be Owl Carousel 2 here.
I have a solution for you too
http://codepen.io/Nikolaus91/pen/EKwJXw
I didn't have a better idea to set .stage width other way than using jQuery. Maybe you will came up with a better solution when you will see mine.
var sumwidth=0;
$(".stage").children('.carousel-image-container').each(function() {
var child = $(this);
sumwidth+=child.outerWidth();
});
$(".stage").css({
'min-width' : sumwidth + 25 + 'px'
});
P.S. 25 value is random, don't know why this 25px is missing when outerWidth value is sumarized. Maybe it's because of codepen...
P.S. -2 If you are making website based on images (majority of the content) remeber to compress images using for example (my favourite) kraken.io. If you are uploading images using media library in wordpress install WP Smush by wpmu dev it will compress images when uploaded - no need to remeber about compressing images.
The last important thing (in my opinion) is to use some kind of lazy loading solution, downloading multiple images at once when only minority is visible is bad approach, try BjLazy for wordpress. Might suit your needs.
Working with the css in you jsfiddle I came up with this which seems to do the trick.
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.img-resposnive {
height: 100%;
width: 100%;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
height: 400px;
max-height: 600px;
min-height: 200px;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: relative;
float: left;
}
Below code works as I expected. Every thing is perfectly styling.
<style>
.letter-spacing{
width: 400px;
background: red;
text-align: center;
letter-spacing: 20px;
}
</style>
<div class="letter-spacing">
<img src="icon1.png">
<img src="icon2.png">
</div>
However, if I render the "div" using document.write, "letter-spacing: 20px;" doesn't work. The interesting thing is red background and center alignment still work.
<style>
.letter-spacing{
width: 400px;
background: red;
text-align: center;
letter-spacing: 20px;
}
</style>
<script>
document.write('<div class="letter-spacing">'+
'<img src="icon1.png">'+
'<img src="icon2.png">'+
'</div>');
</script>
Is there anybody knows why?
it's because you write it like this
document.write('<div class="letter-spacing">'+
'<img src="icon1.png">'+
'<img src="icon2.png">'+
'</div>');
which will resulting in this HTML
<div class="letter-spacing"><img src="icon1.png"><img src="icon2.png"></div>
which doesn't contain any space, thus letter-spacing: 20px; not working.
Different with the one you write directly in HTML with a new line which considered as a space.
If you want to have the same results, then change it to this
document.write('<div class="letter-spacing">'+
'<img src="icon1.png"> '+ // Note the space before '
'<img src="icon2.png">'+
'</div>');
It is very strange, but I could fix it in some hard way like this
document.write('<div class="letter-spacing"> '+
'<img style="margin-right: 20px;" src="icon1">'+
'<img src="icon2">'+
'</div>');
But if I set a class in css it does not work. Thats really strange
I've created an page where users can view images along with the image description although I'm having some issues with the CSS for the description. The description is retrieved via PHP and is shown as a echoed variable. The issue with this is that the descriptions seems to carry on along one single line when it should be carrying on within the div.
As shown below, it displays along one line when it should be wrapping below to the same width as the text area below the description.
I've tried changing the width of the .desc class to a set pixel width of 290px instead 100% (should still take the 290px from the image-desc class container) but I'm having no luck.
My current CSS:
.image-info {
width: 290px;
display: inline;
float: right;
}
.image-info .desc {
text-align: justify;
width: 290px;
margin: 10px 0px;
}
and the HTML:
<div class="image-info">
<? $desc = htmlentities($row['desc'], ENT_QUOTES, 'UTF-8'); ?>
← Back to Gallery
<div class="desc"><? echo $desc; ?></div>
<? if(empty($_SESSION['user'])) { } else { print '<i class="icon-chevron-down"></i>Options<br /><div class="slidingDes"><form action="admin/includes/edit-img.php?id=' . $id . '" method="post"> <textarea type="text" name="description" placeholder="' . $desc . '"></textarea> <br/><input type="submit" value="Change" class="btn btn-primary"/> </form><form action="admin/includes/cover-image.php?id=' . $id . '" method="post"> <input type="submit" value="Cover Photo" class="btn btn-danger"/> </form></div>';}?>
</div>
It seems that your content go beyond the limit when there is no white space in the word
so just add word-wrap:break-word; to imageInfo class
here is your css
.image-info {
width: 290px;
display: inline;
float: right;
word-wrap:break-word;
}
Take a look here in fiddle
Add the new CSS 3 word-break property:
word-break: break-word; /* Will prevent text from bleeding outside container */
Use the CSS3 word wrap
word-wrap:break-word;
This will force the text to go down
I'm trying to align two divs horizontally. Having tried about 15 different approaches, I still don't manage to get it working.
$html .= '<div class="fotoLinks">';
$html .= ' <img src="'.$image->getWebPath().'"/>';
$html .= '</div>';
$html .= '<div class="tekst">';
$html .= $this->text;
$html .= '</div>';
With corresponding CSS (div.alinea is a wrapper div):
div.alinea
{
float: left;
width: 100%;
margin-bottom: 15px;
}
div.tekst
{
float: left;
}
div.fotoLinks
{
float: left;
margin-right: 15px;
height: 100%;
}
I hope to get some inspiration for a new approach.
Try
display: inline-block;
Instead of float: left;
EDIT:
A method you can try, but is less supported, for your wrapper div, set:
display: table;
And for your inner divs:
display: table-cell;
You have to define the width for your text div and image div, since as is it inherits the parent elements width of 100%. There are a ton of others ways/answers, but this would have you tweak the least amount of code to get it to work right.
This works for me:
<html>
<head>
<style>
.ftext {
border: 1px solid red;
float:left;
}
</style>
</head>
<body>
<div class="ftext">
This is the left text.
</div>
<div class="ftext">
This follows to the left.
</div>
</body>
</html>
It floats the right text beside the left text.
In the CSS for div.tekst, put in clear:both.
Just give the 'tekst' div a left-margin. I didn't test this so I'm not sure that alone will fix it without adjusting something else.
Is it possible to center an image only trough setting a class to the img tag without side effects? The problem is the following: I have an anchor around an image. If I use the following CSS
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
And this (stripped down) HTML:
<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
<img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>
the link takes the whole width of the main div. This means not only the image is clickable - also the space around the image (actually the whole width) is clickable. This is through the CSS display: block.
How can I center an image without using a parent div? I don't want the whole area clickable.
Background:
You can read this topic. It is about Wordpress and the built in editor. He automatically generates the class aligncenter on an image (if the user pressed the center button). I need this for my own theme. According to the moderators there this should be only a CSS question and doesn't have to do with changing code in Wordpress.
in aligncenter class add text-align:center
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
text-align:center;
}
I'm not familiar with wordpress, but you might want to try setting the image's and the anchors's css 'display' property to 'inline-block'.
If you are limited in changing the document's DOM, another option is adding an 'onClick' attribute to the image.
This will allow you to run some function once the image is clicked.
So, for example, if you want to redirect to another page:
<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>
And in the page's header:
<script type='text/JavaScript'>
var myRedirect = function(){
window.location.href = 'Some other location';
}
</script>
Notice the style='cursor:pointer', which changes the mouse's cursor to a 'hand' cursor.
To avoid an additional div container or even JavaScript, you can make the anchor display as a block:
.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}
/* height and width must equal your image's values */
<img src="logo.png" alt="Logo" />
Live demo: http://jsfiddle.net/performancecode/Ggk8v/
it still incorporates a div, but the way i do it is:
<div class="megaman">
<img src="img/megaman.jpg" alt="megaman">
</div>
img {
height: 125px;
width: 200px;
}
.megaman{
text-align: center;
margin: 0 auto;
display: block;
}
And yes, I replaced .logo with .megaman because megaman rocks! But it should work. I couldn't figure it out without using a div.
The solution I found. Adding /></a> and width and height to the anchor tag cuts down the hyperlink to the image...
<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>
Second answer:
paste this in functions.php
add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
// only do this on center
if($align == 'center') {
$html = str_replace('aligncenter', '', $html);
$html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
}
return $html;
}
Down side, this won't effect already inserted images...
Also if you can please move the style of the <p> to the stylesheet.