I am trying to align the icons under the Share This Course icon horizontally, it works in the sidebar but not my content. Any advice?
Example here
http://www.themarketinggroup.ca/canscribe/courses/medical-transcription-healthcare-documentation-course/
The icons in the sidebar are floated to the left.
One solution would be to add a rule of float: left to the .widget li selector, like so:
.widget li { float: left; }
You could then add the desired amount of spacing between each icon with padding or margin rules.
You could also use flexbox. What you would do in that case is make the ul with a class of socials display: flex and add the additional rule of justify-content to give the icons some horizontal spacing. Something like this:
ul.socials { display: flex; justify-content: space-around; }
I like the latter solution because it takes care of spacing the icons for you.
The possible ways to achieve this one is by using float
.display_inline li {
float: left; // inline elements in left
margin: 10px; //to create some space between the icons
}
Related
I'm wondering if there's a way to adjust the navbar in MaterializeCSS to prevent the double row when the number of elements exceeds the width of the browser. I was thinking about some scrollable navbar like the tabs:
But I can't find a way to implement it.
Taking inspiration from nav-tabs, which exhibit this behaviour as standard:
Set nowrap, overflow and width on the link container (UL in this case).
nav ul {
white-space:nowrap;
overflow-x: auto;
width: 100%;
}
Set display, and unset the float on links (LI in this case).
nav ul li {
display: inline-block;
float: none;
}
Codepen
I have read lots of similar questions and tried to apply the answers by adding divs with position:absolute and relative aroudn the images to the code but I cannot get it to work.
http://store9711.americommerce.com/milk-glass-vases-and-candle-holders.aspx
I need to bottom align these thumbnails while keeping them horizontally centered
Is anyone able to show me how?
You will need to use the vertical-align property
CSS
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*Add this line*/
}
.category-product .thumbnail{
display:block;
}
Also give display:block to the anchor tag to keep the image horizontally center.
.category-product .thumbnail img {
display: inline;
vertical-align: bottom; /*add this*/
}
The default Bootstrap setup (line 7 of bootstrap.min.css) on your site aligns to middle (applied to img HTML element). You'll just need to override for the category images.
please take a look at this page.
As you can see there are some "read more" buttons. (translated - "czytaj więcej").
This are just after the excerpts. I want to center this read more button.
I gave the a href ... the following class:
class="readmorebtn"
And this CSS:
.readmorebtn{font-size:23px; text-align:center !important;}
But for some reasons it's not working. Any hints?
You are using a element for your button, so a element is inline by default, so even if you center, the text has no place to get centered,as inline elements don't take 100% horizontal space, so inorder to center the text, you need to make it inline-block or block
.readmorebtn {
display: block;
font-size: 23px;
text-align: center; /* No need of !important here */
}
If you are using inline-block the element will be inline and also block but again, you need to define some width to your inline-block element. Whereas block level element will take up entire horizontal space.
Demo (See what if you don't make it a block level element)
Demo 2 (Making it a block level element)
a element can't have the width because it's an inline element and without width you can't align to center so you should add display: inline-block; or display: block; to your a
.readmorebtn {
display: block;
font-size: 23px;
text-align: center;
}
I'm trying to center the menu bar and make the menu bar fit the text.
Here is a website I'm trying to edit:
http://www.graffitisumperk.g6.cz/blog/
I've already figure out that I can center menu items this way:
.menu {
text-align:center
}
.menu li {
display:inline-block;
float:none;
margin-left: -5px;
}
.menu li li {
display:block;
text-align:left
}
But I can't seem to fit the menu bar to the width of the menu items.
I've calculated it should be 445px long, but when I change this:
#container {
margin: 0 auto;
max-width: 960px;
to 445px, the whole page it affected, not just the menu bar.
Any ideas how to fix it?
You can do it very very similarly :). One of the effects of display: inline-block; is that the element attempts to resize itself to contain its children. You could achieve this with float or position: absolute as well, but those do not really fit into this layout.
.main-nav { text-align: center; }
.menu { display: inline-block; }
I guessed you might want to center the menu, so I added the text-align too.
Tip: If you use the inspector of your browser (all modern browsers have a pretty decent one), you can easily figure out which element you need to change.
When I looked at your page, it looks like the part you really need to change is the "main-nav" class.
The #container div contains your whole page so you don't want to mess with that one.
I wish to make the all the list items to be centered. or at least 20 pixels from the top.
I have tried negative margin-top but that didn't work.
Any suggestions?
Here is the site. http://freddygonzalez.me/dev/85
The simplest way to do this is to remove display: inline and margin-top and add the following rules to the li elements:
float: left;
line-height: 49px;
Note that this won't work if a menu item can have two lines of text.