See http://codepen.io/robbielaldrich/pen/ZWJyjO?editors=1100.
HTML:
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
The <a> tag seems to be extending to the margin of the <img>, but I can't reduce the margin or the image will no longer be centered.
Thanks for any help you can give!
Why you dont use a div to wrap and halign your image?
see my code
HTML
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
CSS
img{
display: inline-block
}
EDIT:
Codepen: http://codepen.io/anon/pen/grxjmK
Bootstrap's CSS is sets both center-block and img-responsive to display: block
A block level element becomes like a <div> and will take up the whole width of its container if a width or max-width isn't specified. The anchor is wrapped around the entire image block, including the empty space.
You could override the display: block easy enough and center-align the image as if it were text:
<div class="text-center">
<a href="http://www.clashmusic.com/reviews/steve-reich-and-the-colin-currie-group-live-at-the-royal-festival-hall-london">
<img class="img-responsive center-block" style="display: inline-block !important;" src="http://clashmusic.com/sites/default/files/field/image/steve%20reich.jpg">
</a>
</div>
But without knowing the context of the layout I can't say if there is a better solution.
Related
How do you get rid of the element outline that the a tag inserts, without ruining the child element?
<a href="">
<img alt="picsum" src="https://picsum.photos/200/300">
</a>
Ideally highlighting the anchor tag should yield the full width and height of the child element
display: block should fix this issue:
a,
img {
display: block;
}
<a href="">
<img alt="picsum" src="https://picsum.photos/200/300">
</a>
What's happening is the <a> and img are display: inline by default, which creates extra space underneath them as inline is made to work well with text. It may seem stupid that things are this way but it allows an image to fit in nicely with text like you would do in a word processor.
Is there a way to guarantee that the size of the anchor element should be fully clickable?
I'm doing maintenance in a website where the parent div of the tag width is smaller than the area it should be clickable, so even if the element is the correct size, half of it is not clickable.
Basically this is the code:
<div class="col-xs-12 col-sm-2 col-md-1">
<div class="logo">
<a href="<?= base_url() ?>">
<img class="logo-img" src="https://via.placeholder.com/100" >
<img class="logo-icon-img" src="<?= base_url('site/images/logos/logo-icon.png') ?>" style="display: none">
</a>
</div>
</div>
When I add a style="display: inline-block" inside the tag, it fills the correct size (the image) of what should be clickable, but as the <div class="col-xs-12 col-sm-2 col-md-1"> is smaller than the image, the clickabe area is limited.
I would like to know if it's possible to force the clickable area without changing any CSS from the other classes/elements.
Even if I increase the <div class="logo"> width, the a clickable area is still limited to the its parent size.
Thanks!
I tried using display: flex in the anchor element styling and then the anchor element is taking the full width inside the div, I hope this is what you wanted.
Here is the working demo
I am new to bulma but have been trying to make a simple webpage with it.
I have run into a frustrating problem where I believe one of the classes "button is-large" is forcing elements on my page to be inline.
Here is a minimal code demonstration of what is happening:
<div class="column" style="height: 200px">
<a class="button is-fullwidth" style="height: 100%">
<p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
<p class="title">Print Release</p>
</a>
</div>
The elements in the above code will show up inline.
I want the elements inside of the "a tag" to stack on top of one another. When the "a tag" has the class "button is-fullwidth" it forces the two elements to be inline; whereas if this class is removed they will end up on top of one another no issues.
Here is a full jfiddle demonstrating different approaches I have taken to resolve my issue. I have tried three different ways to make these elements appear on new lines but to no avail.
Is this just an inherent property of the "button ..." class? Can I keep the button class while also maintaining new lines?
The class button is styled using flexbox. The property display: flex makes its contents appear 'inline'. You can learn more about flexbox here and here.
There are several ways to get the layout you want, here is one approach:
Add the .is-block modifier to a.button - This will override the display property, and ensure that block elements will stack. In your example, p is a block element, and img is an inline element. (Alternatively, you could correct this in CSS by adding flex-direction: column to your button.)
Instead of adjusting the height of .column using inline CSS, you could create a new modifier class that can be added to columns when you need a fixed height. I have added is-fixed-height and height-200 to the .column and used some custom CSS to define these.
Bulma gives .button a height of 2.25em. You need to override this with 100%. Again, you could create a modifier class and add it to the button (something like is-height-100), or simply target the button you want with CSS. Both options are preferable than using inline CSS.
The images you are using are too big to allow the text to fit in below the button. Instead of using height: 200px on the column, use min-height. If you must use a height of 200px, you will need to make some adjustments to the image. Let me know and I can try help.
fiddle
.is-fixed-height.height-200 {
min-height: 200px;
}
.is-fixed-height.height-200 .button {
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<div class="container">
<div class="block">
<div class="columns">
<div class="column is-fixed-height height-200">
<a class="button is-block is-fullwidth">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
<p class="title">Print Release</p>
</a>
</div>
<div class="column is-fixed-height height-200">
<a class="button is-block is-fullwidth">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
<p class="title">Print Release</p>
</a>
</div>
<div class="column is-fixed-height height-200">
<a class="button is-block is-fullwidth">
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
<p class="title">Print Release</p>
</a>
</div>
</div>
</div>
</div>
You gave the anchor a class of button and full-width
The class button always place content inline
HTML
<a class="btn is-fullwidth" style="height: 100%">
<p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
<p class="title">Print Release</p>
</a>
CSS
.btn {
text-align: center;
}
I have changed the button class with custom class name btn then I gave it a center align with CSS
The following is not an option
<div class="container">
<a href="/Home">
<img class="img-responsive center-block" src="/home_logo.png" alt="Home"/>
</a>
</div>
Cause the entire row (container) is now clickable and not just the home_logo.png
Is there any graceful way (maybe a bootstrap class) to make only the image clickable (and also for the image to be responsive).
First of all, you may to see, that you have two elements with display: block behavior (classes .container, center-block and img-responsive have display: block property) and one element with display: inline behavior (tag's <a> default behavior). You need to change display: inline to display: inline-block. Simple solution to center nesting elements is to add to parent element (div.container in this case) one more Bootstrap's class .text-center. Class .center-block is extra and you may to remove it.
<div class="container text-center">
<a class="inline_block" href="/Home">
<img class="img-responsive" src="/home_logo.png" alt="Home">
</a>
</div>
.inline_block {
display: inline-block;
}
JSFiddle-example
try this
<div class="container text-center">
<a href="/Home" class="inline_block">
<img class="img-responsive center-block" src="http://icons.iconarchive.com/icons/janosch500/tropical-waters-folders/512/Burn-icon.png" alt="Home">
</a>
</div>
working fiddle
In Bootstrap 5 you can use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">
<img src="/images/jack.jpg">
</div>
Check docs link - https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
I am trying to make the captions appear centered below the images with the following code :
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="width:100px;text-align:center;">{text}</div>
</div>
</div>
However, the end result is that the text is centered indeed, but placing the beginning of the text in the center of the div, thus making the text appear to the right.
How can I prevent this?
You can remove the margin:18px and the width:100px of the div which contains the text, since its parent div already has width:100px:
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="text-align:center;">{text}</div>
</div>
Since you need to keep the caption center to the image, the width of div consisting the text should have same width as the img. and to make text center apply attribute align='center' to the div itself instead of giving css text-align:center
<img src="{src}" class="icon" />
<div align="center" style="width:width of image;">{text}</div>
This will solve your problem