The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS A basic bit of formatting that eludes my tiny brain

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #270253

    How would I write up the CSS and HTML for a logo and some text next to it like this:

    i.e. to be vertically and horizontally aligned side by side in a suitable div?

    Here’s some code:

    I’ve some how managed to get a one line version together, but I’m incredibly useless at this stuff:


    Had a spare 5 minutes so I created it for you.

    Used floats so it has great browser coverage.

    Have a look at the code and see how it works.

    It’s a good start anyway you can tweak it further :)


    Hi, Thanks Tom. It’s not working quite as expected after chucking it into my website, but it does look like a good starting point for me to try an work on. I’ll try to give the wrapper the full page width (or centre it) and make the logo and text meet in the middle. I’ve got them separately aligning left and right at the moment after widening the div. Anyway, I think you’ve put me on the right track. :)


    Hi @SteveLovell,

    If you want to place the logo vertically and horizontally centered then you can try display: flex like this.

    .wrapper {
    display: flex;
    height: 100vh; /* Height must 100% to keep the child vertically centered */

    .child {
    margin: auto; /* This will keep the child always to the center both vertically and horizontally */

    There are more solutions but this seems to be the simplest. You can try this also. It serves the purpose.

    .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


    Yeah only whipped it up real quick…loads of ways to can do it….for example Manum’s idea.

    However that may be abit complex for you.


    After re-starting my efforts and far more effort and experimentation than should be expected for entry level stuff, I eventually came up with what I needed:

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.