Img Align centre or center not working on HTML website kodeum.co.uk. The error is on line 232
<div class="container mt">
<div class="row clients centered">
<p class="mb">Some clients that I had the pleasure to working for.</p>
<div class="col-sm-2">
<img align="centre" src="assets/img/coding-kids.png" alt="Coding Kids">
</div>
<div class="col-sm-2">
<img src="assets/img/flydan.png" alt="flyDan">
</div>
</div><!--/row-->
</div><!--/container-->
</div><!--/.G-->
Can Anyone Help?
Harry
Think you just misspelled center
But you may have better results doing it within the style of the div anyways
Try this, Assuming the width of your png is 200px
<div class="col-sm-2" style="width: 200px; margin-left: auto; margin-right: auto;">
<img src="assets/img/coding-kids.png" alt="Coding Kids">
</div>
Related
I am stuck in a problem when am trying to set image and text side by side then its not shown perfect , checkout below I shared my code.
This is my image
https://ibb.co/SKS3bJM
i want like this
https://ibb.co/RhFkbkX
index.html
<div class="container">
<div class="row">
<div class="col-md-4 mt-2">
<img src="Images/twitter.jpg" style="width: 200px;">
<div style="margin-top: 10px;">
<h4>Should Twitter Get Rid of Follower Counts?</h4>
<p>The possibility feels closer than ever</p>
<p>Cool Neha in All Things Creative</p>
<p><b>JAN 9. 5 min read</b></p>
</div>
</div>
<div class="col-sm-4">
<div class="row" style="display: flex; flex-direction: column;" style="height: 50px;">
<div class="col-sm-4" style="display: flex; ">
<img src="Images/html.jpg" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="col-sm-4" style="display: flex;">
<img src="Images/cs.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="col-sm-4" style="display: flex;">
<img src="Images/js.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
</div>
</div>
<div class="col-sm-4 mt-2">
<img src="Images/cofee.png" style="width: 350px;">
<div style="margin-top: 10px;">
<h4>No,That's Not How You Say It.</h4>
<p>A short Personal history of my favourite fast Food.</p>
<p>VIP Singh</p>
<p><b>JAN 29. 8 min read</b></p>
</div>
</div>
</div>
</div>
It looks like the center column is being squished too much. This is because each image-text pair was inside a div with class="col-sm-4". This was making the div too narrow. If you remove the class, the problem will disappear.
This is the resulting code:
<div class="container">
<div class="row">
<div class="col-md-4 mt-2">
<img src="Images/twitter.jpg" style="width: 200px;">
<div style="margin-top: 10px;">
<h4>Should Twitter Get Rid of Follower Counts?</h4>
<p>The possibility feels closer than ever</p>
<p>Cool Neha in All Things Creative</p>
<p><b>JAN 9. 5 min read</b></p>
</div>
</div>
<div class="col-md-4">
<div class="row" style="display: flex; flex-direction: column;" style="height: 50px;">
<div class="" style="display: flex; ">
<img src="Images/html.jpg" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="" style="display: flex;">
<img src="Images/cs.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
<div class="" style="display: flex;">
<img src="Images/js.png" style="width: 100px; height: 100px;">
<p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
</div>
</div>
</div>
<div class="col-sm-4 mt-2">
<img src="Images/cofee.png" style="width: 350px;">
<div style="margin-top: 10px;">
<h4>No,That's Not How You Say It.</h4>
<p>A short Personal history of my favourite fast Food.</p>
<p>VIP Singh</p>
<p><b>JAN 29. 8 min read</b></p>
</div>
</div>
</div>
</div>
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
As the title says, how do I center two divs next to each other perfectly?
My HTML: (or well, a bit of it)
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row row-centered">
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered col-md-4">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
My CSS: (same here, this isn't all)
I tried to make a box for the css above too but it didn't work. http://pastebin.com/SzhAmh3f
Basically the problem I'm having is that the code above works kind of but one of the blocks are a little bit lower than the other and i have no idea why.
Yes, I know that there are other posts about this subject but no one worked for me so I decided to open my own.
There are a lot of unwanted styles actually to achieve this, you simply need the below code on your team-centered class. Remove row-centered class. It should look like this
CSS
.team img {
width: 140px;
height: 140px;
border-radius: 50%;
margin: 10px auto 40px;
}
.team-centered {
width: 50%;
float:left;
text-align: center;
}
HTML
<section class="team" id="team">
<div class="container">
<h3>The team behind CatCraft</h3>
<div class="divider">
<div class="hr">
<div class="hr-dot"></div>
</div>
</div>
<div class="row">
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/6a940db5e02d4bf79db9203a8b126f0d/140.png" alt="catx">
<h4 class="bold">CatX (Owner)</h4>
<p>Hi! I'm CatX and I'm the owner of CatCraft. I like anime and tech stuff. My favourite server is bending. =^_^=</p>
</div>
<div class="team-centered">
<img src="http://cravatar.eu/helmhead/ef4fbdb6d629480d8f98ed9919c111e9/140.png" alt="__ast__">
<h4 class="bold">__Ast__ (Co-Owner)</h4>
<p>Example text, pls write something ;-;</p>
</div>
</div>
</div>
</section>
So I'm pretty new to HTML/CSS and I'm doing this lesson from CodeAcademy and I'm trying to replicate this: https://s3.amazonaws.com/codecademy-content/projects/junction/index.html
The problem is that I'm not being able to make those images in the middle look bigger, they're very small, and I have no idea how to resize them.
Here's my version: https://jsfiddle.net/eb3roj0j/1/
<!--supporting-->
<div class="supporting">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://goo.gl/HuNcSi" class="img-responsive" alt="">
<h2>Read</h2>
<p>Discover new stories and follow your favorite writers.</p>
</div>
<div class="col-md-4">
<img src="https://goo.gl/Vxo5z5" class="img-responsive" alt="">
<h2>Write</h2>
<p>Create stories about our world, or entirely new worlds.</p>
</div>
<div class="col-md-4">
<img src="https://goo.gl/93x9GD" class="img-responsive" alt="">
<h2>Talk</h2>
<p>Join the conversation by talking with your favorite readers and your fans.</p>
</div>
</div>
</div>
</div>
in your css you have:
.row img
{
position: relative;
float: left;
max-width: 35px;
max-height: 35px;
}
this is constraining your image size
Is there a way to avoid such use of ng-repeat.
To fix the issue ,I used two ng-repeat using the option limitTo to display each 3 element separately.
What I want to do is ,to insert my elements and after each 3 elements ,So I add
<div class="row"> </div>
Below is my code:
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="row l-b-margin">
<div class="col-md-4" ng-repeat="name in Courses|limitTo:3">
<div class="well well-white">
<img alt="R Programming" class="center-block l-b-margin"
height="100" ng-src="{{name.logo}}" width="100" />
<h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
<p class="text-space l-b-margin">Write your first code here</p>
<a class="rounded-button cta-border-button center-block m-button"
href="courses/introduction-to-r">Start Course</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4" ng-repeat="name in Courses|limitTo:-3">
<div class="well well-white">
<img alt="Data Manipulation" class="center-block l-b-margin"
height="100" ng-src="{{name.logo}}" width="100" />
<h6 style="text-align: center; color: #516979; font-size: 21px">{{name.name}}</h6>
<p class="text-space l-b-margin">Write your first code here</p>
<a class="rounded-button cta-border-button center-block m-button"
href="courses/data-table-data-manipulation-r-tutorial">Start
Course</a>
</div>
</div>
</div>
</div>
</div>
The simple way to do is use ($index+1)%3==0 with ng-if and put the below element at the end of ng-repeat.
<div class="row" ng-if="($index+1)%3==0"> </div>
Plunker
Hope it helps :)
What you're seem to be doing is trying to prevent this situation from happening: (some blocks shifts to the next row if not all have equal heights)
If that's the case you can (and should;) ) fix it via simple css: (just add a custom class to the div your iterating over)
.my-block:nth-child(3n+1) {
clear: left;
}