Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
KatECN11
@KatECN11
Would I need to create a border around the image to use margins?
Daniel Slatkin
@DSlatkin
@KatECN11 Have you gone over any CSS yet in FCC?
KatECN11
@KatECN11
Yes, I successfully centered my text, but not my image
Jacob Pieczynski
@JacobPie
@KatECN11 How did you center the text? text-align: center; ?
KatECN11
@KatECN11
yes, exactly
Daniel Slatkin
@DSlatkin
If so... You may want to look at the text-align CSS property for whatever tag contains the image. For example if it's <div><img src="..."></div> then if div has a text-align property set to center on it, the image should be centered.
KatECN11
@KatECN11
@DSlatkin YES!!!
That worked!!!
I had the text-align: center as an inline style attribute on the text and not on the div. I moved it to the div and now it's all centered!
Daniel Slatkin
@DSlatkin
:) Alternatively if the image is not in-line with text (i.e. if it stands on its own) then img {margin-left: auto; margin-right: auto;} will center it - but the image can't be in-line with text in that case
Glad it worked!
Jacob Pieczynski
@JacobPie
I personally always use margin: auto; for that kind of thing
KatECN11
@KatECN11
I'm trying the margin: auto that both of you suggest (it's not an inline image) and it doesn't seem to center.
Daniel Slatkin
@DSlatkin
Can you copy and paste the code inside ``` marks?
They're "backticks" (the key next to 1 on the keyboard)... If you use three backticks before/after code it formats it nicely
KatECN11
@KatECN11
use the backpacks here or in my html?
haha, backticks (darn autocorrect)
Daniel Slatkin
@DSlatkin
Here if you're pasting code
KatECN11
@KatECN11

```<div style="background-color: silver" class="picture-border">
<img style="margin-left: auto; margin-right: auto" class="smaller-picture" src="https://github.com/KatECN11/hello-world/blob/master/Caroline%20Herschel.jpg?raw=true" alt="Caroline Herschel studying an astronomical cataloge.">

<h2 style="font-size: 20px">"The eyes of her who is glorified here below turned to the starry heavens." -inscription on her headstone.</h2>
</div>```

First I had the margin-left: auto, etc in my css for img but that didn't work so I tried it the above way
Daniel Slatkin
@DSlatkin
Okay sorry didn't clarify or forgot something about images when telling you about margin autos
So elements that display in HTML are generally either "inline"-level elements or "block"-level elements
KatECN11
@KatECN11
You probably assumed I have more knowledge than I do. :)
So mine are inline level and the margin: auto won't work?
Daniel Slatkin
@DSlatkin
Images are by default an inline-level element, so text will wrap around them... Which is also why you can't set a default margin on them. You can force them to be block-level elements by adding a display: block property to the image's style
Yep - but you can force it to be block.
Examples of inline elements: <strong>...</strong>, <a href="...">...</a>, etc.
Example of block-level elements: <h1>...</h1>, <p>...</p>
Text-input fields and buttons are also inline elements
And by default images are too, unless you change them to be blocks with display: block
KatECN11
@KatECN11
Yes! That was all very helpful! Now I know two ways to center the image! Thank you for your help!
Are block-level elements defined by elements that skip a line and start a new paragraph essentially?
Daniel Slatkin
@DSlatkin
That's one thing that block-level elements do as a result of how they behave
KatECN11
@KatECN11
I have so much to learn!
Daniel Slatkin
@DSlatkin
It's better to think as block-level elements as elements that "expand" left and right to fit the entire width of their "parent" block level element
KatECN11
@KatECN11
hmm... that helps give more perspective
Pink, blue, green are block-level elements (pink I've set the width to 600px). Blue and green expand to fit the width of the parent element since they're block-level. Purple is an inline element.
Sorry I'm sharing so much! Just spent forever not knowing the difference between block and inline elements haha, and wish someone explained sooner to me.
KatECN11
@KatECN11
NO! I super appreciate it!!!
abraham anak agung
@padunk
Yes FCC should explain it @DSlatkin i didn't know it too after someone told me about that. Nice explanation. Thanks.
CamperBot
@camperbot
padunk sends brownie points to @dslatkin :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @dslatkin |http://www.freecodecamp.org/dslatkin
Daniel Slatkin
@DSlatkin
Yeah - it had me curious and I'm trying to find a good picture online of block vs inline elements, and can't find anything (except this: https://goo.gl/5TC4dG) haha.
I don't find that image helpful at all, though I like the effort (if anything adds to the confusion since a block-level element can expand to fit its parent block-level element)
abraham anak agung
@padunk
:laughing:
geoffrymichael
@geoffrymichael
I am doing twitch api app and ran into a styling problem. I cannot for the life of me figure out how to adjust the anchor tags to vertically center them in their divs via css, or really how to move them vertically at all. Padding is working horizontally, but when I try padding top or bottom, the anchor tag won't move. I see the padding when I use inspector in chrome, but it does not actually do anything. Any help would be greatly appreciated. This is the github pages to the actual app(very bare bones at the moment) https://geoffrymichael.github.io/twitch-api-app/. And here is the repository. In the styles.css I am trying to manipulate the anchor tags that I have given a class of .links. https://github.com/geoffrymichael/twitch-api-app/tree/master/docs
Ken Haduch
@khaduch
@KatECN11 - one site that you'll probably want to bookmark is the css-tricks website. For example, you'll find pages like this one: https://css-tricks.com/almanac/properties/d/display/ that if you take the time to study them will show you a lot of detail about HTML and CSS.
Phuc Le
@phuchle
@geoffrymichael you can add display: flex to your .stream class and then on img and .link add align-self: center