From searching around, I know this question has been asked before and I just... don't understand what is going wrong here.
I have tried about a million different angles and just can't get my text to center.
If anyone has any idea what the deal is and would like to let me know, that would be great.
<div class="row-fluid text-center">
<h1 class="span12">Foobar's Contacts</h1>
</div>
Among other things, I already tried moving the text-center class to the h1 element.
EDIT: I was able to change it to this and center the header. Any drawbacks to this approach?
<div class="offset4 span4 text-center">
<h1 class="span8">Foobar's Contacts</h1>
</div>
Try putting <h1> within a <div> specifying the span. Something like
<div class="row-fluid">
<div class="span12 text-center">
<h1>name's Contacts</h1>
</div>
</div>
I don't really understand though if you are trying to center a text within a <div>, or the entire page. If you want your page to be centered use something like
<div class="container">
.
.
<div class="row-fluid">
<div class="span12 text-center">
<h1>name's Contacts</h1>
</div>
</div>
.
.
</div>
Hope it helps.
Related
I am a beginner in web designing. I know some basics about layout in CSS.
I am tried to create a blog post layout, given in the picture below.
see image layout
Please help me to do that.
Welcome to StackOverflow! As heads up, usually you will want to come here for more specific questions to solve problems with your code, or to explain weird behavior you didn't quite understand. Your question is a little bit too open ended to be answered here but I can help you get started:
For starters, start thinking about translating every box in your picture into an HTML div. If you break each part of that picture into divs it can be a good foundation to add your css styling on top of. In your case, you might want something like this:
<div id="articleList">
<div id="article_1">
<div id="articleImage_1">
<img src="articleImage_1.jpg" alt="Picture #1">
</div>
<div id="articleContent_1">
<div id="articleTags_1"></div>
<div id="articleTitle_1"></div>
<div id="articleAuthorNameAndCommentsSubheader_1"></div>
<div id="articleBody_1"></div>
</div>
</div>
<div id="article_2">
<div id="articleImage_2">
<img src="articleImage_2.jpg" alt="Picture #2">
</div>
<div id="articleContent_2">
<div id="articleTags_2"></div>
<div id="articleTitle_2"></div>
<div id="articleAuthorNameAndCommentsSubheader_2"></div>
<div id="articleBody_2"></div>
</div>
</div>
</div>
Of course you would be generating each row inside a for loop or .map() type function. You would also add in your .css in a 'class' attribute for every div.
Please let me know if you find this helpful by selecting my post as the answer, and don't be shy if you have any more questions :)
If you know about boostrap than you can use this boostrap card to create that layout you want. Here is the sample code for it.
<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
<div>
<img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?
text=Image" alt="Card image cap">
</div>
<p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>
I have a very simple piece of code that I am trying to get to work and its giving me issues.
I have a grid of 9 and 3 set up. 9 being the tool title and 3 being the status of the tool.
In the code below however, even though I am using pull-right to get the content to the right side of the col-md-3 the content within that isn't aligned to the right like I expect it to be.
Here is a fiddle: https://jsfiddle.net/p5yctnw0/2/
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3"><span class="pull-right"><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
</div>
What I would expect:
I know this is going to be a silly css attribute I am missing but not sure what else to try.
The content is aligned to the right but the text is not right aligned. Use text-right css class to right align the text.
<span class="pull-right text-right">
<h4>Active</h4>
(dates & replacement if applicable)
</span>
You can use let the text to the right:
.col-md-3 {text-align:right}
https://jsfiddle.net/p5yctnw0/5/
https://jsfiddle.net/p5yctnw0/3/
Use the class text-right when it comes to text. pull-right is for divs.
Basically what you are looking for is text-align:right . Use it to get your desired output. If you want both the span and the trailing text to be pulled right, use #van-tuan-pham 's answer. Or use only to the span.
But do not override bootstrap classes. Instead use your own class or id selectors to set css attributes.
simply do like this way
.alignment {
text-align:right;
}
.alignment span {
display:block;
font-size:13px;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 alignment">
<h4>Active <span>(dates & replacement if applicable)</span></h4>
</div>
</div>
</div>
Looks like it pulls the div right, but the spans are still left aligned within the div.
Split the div into 2 spans, one for each line.
<div class="col-md-3">
<span class="pull-right">
<h4>Active</h4>
</span>
<span class="pull-right">(dates & replacement if applicable)</span>
</div>
replace row div your code with following:
<div class="row">
<div class="col-md-9">
<h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
</div>
<div class="col-md-3 text-right" ><span><h4>Active</h4>(dates & replacement if applicable)</span></div>
</div>
Currently I am structuring the HTMl on my page as follows:
<div class="row">
<div class="col-xs-12">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="container-2">
<div class="content"></div>
</div>
</div>
</div>
</div>
</div>
</div>
There are 6 divs outside of the actual content on each section. The outer column is to be a container of a certain colour, and the inner container is only fill up 8/12 of the outer container. This produces margins with the background colour of the outer container of width 2 on either side of the inner column.
This looks great and is responsive. However, I'm wondering if having this many divs is good practice or not?
Well, I guess it's up to you. If you feel like you can manage this many div's then it's fine. But what you have to think about is, if you for instance would pass on your project to another developer, then he would need to understand your work without cleaning up before he even starts, so it's always important to have that in mind when you develop.
I would maybe construct it this way:
<div class="container">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="content"></div>
</div>
</div>
</div>
This is just what I wan't to do, maybe someone else would do it another way.
I am learning how to become Front End Developer at Udacity. There is a project that I need to submit. I ran in couple of issues I couldn't find help with, some of my images and urls within divs don't want to align properly. I tried using this website as a solution https://codemyviews.com/blog/how-to-center-anything-with-css
because it offered most variations on aligning blocks... But none of them worked.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
These are images, I am trying to align first image to the left, 2nd to the center and 3rd to the right. I could align them by using margins and paddings in html, but I want it to work with responsive design.
<div class="row">
<div class="col-4">
https://github.com/udacity/Appify/
</div>
<div class="col-4">
https://github.com/udacity/Sunflower/
</div>
<div class="col-4">
https://github.com/udacity/Bokeh/
</div>
</div>
and these are urls right underneath the pictures, that aren't lining up, no matter what I try.
This is the screenshot of my webpage http://picpaste.com/Portfolio-NOGcuGm8.jpg
P.S. This is my first post at Stack Overflow, TIA!
You can use Bootstrap's text-center and text-right classes to modify inner alignment of columns.
<div class="row">
<div class="col-4"><img src="http://www.panext.com/wordpress/wp-content/uploads/2012/09/question-63916_640-400x200.jpg"></div>
<div class="col-4 text-center"><img src="http://www.eu-projekti.info/eu/wp-content/uploads/2014/10/1159613_85120857-400x200.jpg"></div>
<div class="col-4 text-right end"><img src="http://www.digitalzenway.com/wp-content/uploads/plan-to-eat-400x200.gif"></div>
</div>
If you aren't using Bootstrap, these classes simply apply text-align: center and text-align: right respectively.
I have the following code:
<div class="col-md-9 col-md-offset-3">
<div class="col-md-9">
<div class="page-header"><h3>Your Profile</h3></div>
<div class="col-md-5">
<div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
<div class="col-md-8 text-left">John Smith<br><br>email#email.com<br><br>07878787456<br><br>Male</div>
</div>
<div class="col-md-7">
<div class="col-md-4 text-right">Name:<br><br>Email:<br><br>Phone:<br><br>Gender:</div>
<div class="col-md-8 text-left">John Smith<br><br>email#email.com<br><br>07878787456<br><br>Male</div>
</div>
</div>
</div>
For some reason it displays like this: http://i.imgur.com/0YPMWf3.png
Here is a jsfiddle (expand the size of the output box): http://jsfiddle.net/z49Ry/
The text with "Name:" etc should be aligned right, and the other text should be aligned left. For some reason the "Name:" etc does not align right properly on the left.
I'm guessing this is because maybe the span is too small, if so then what would be a better solution for displaying data?
I really can't figure out any errors in your code. Like you said it's probably caused by too thin column.
Using BR to separate data is probably worst approach. For tabular data use table. If tables isn't what you're looking for you can as well use unordered list or description list (DL).