Highlighted

How to align the tittle in the middle.

Engaged ,
Jul 05, 2019

Copy link to clipboard

Copied

Hi,

In the header, I want to place the title (red box) in the middle, vertically and horizontally, as seen in the prototype below.

I tried to ".title",

     display: flex;

     align-items: center;

It didn't work.

How would I do?

Global Invisible Hand

Hosun Kang

Q_Dw_34_alignment.png

The Tittle was edited by Moderator.

You need to appply 'align-items: center' to the 'header css' NOT the 'title css' plus add 'flex: 1' to the 'title css' so that container consumes the remaining horizontal space, then you can apply 'text-align: center' to the h1, see below:

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

header {

display: flex;

align-items: center;

background-color: #42A240;

padding: 20px 40px;

}

.logo {

}

.title {

flex: 1;

}

h1 {

margin: 0;

padding: 0;

font-family: "abril-fatface";

font-size: 16px;

font-weight: 400;

color: white;

text-align: center;

}

Views

167

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to align the tittle in the middle.

Engaged ,
Jul 05, 2019

Copy link to clipboard

Copied

Hi,

In the header, I want to place the title (red box) in the middle, vertically and horizontally, as seen in the prototype below.

I tried to ".title",

     display: flex;

     align-items: center;

It didn't work.

How would I do?

Global Invisible Hand

Hosun Kang

Q_Dw_34_alignment.png

The Tittle was edited by Moderator.

You need to appply 'align-items: center' to the 'header css' NOT the 'title css' plus add 'flex: 1' to the 'title css' so that container consumes the remaining horizontal space, then you can apply 'text-align: center' to the h1, see below:

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

header {

display: flex;

align-items: center;

background-color: #42A240;

padding: 20px 40px;

}

.logo {

}

.title {

flex: 1;

}

h1 {

margin: 0;

padding: 0;

font-family: "abril-fatface";

font-size: 16px;

font-weight: 400;

color: white;

text-align: center;

}

Views

168

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 05, 2019 0
LEGEND ,
Jul 05, 2019

Copy link to clipboard

Copied

You need to appply 'align-items: center' to the 'header css' NOT the 'title css' plus add 'flex: 1' to the 'title css' so that container consumes the remaining horizontal space, then you can apply 'text-align: center' to the h1, see below:

* {

margin: 0px;

padding: 0px;

box-sizing: border-box;

}

header {

display: flex;

align-items: center;

background-color: #42A240;

padding: 20px 40px;

}

.logo {

}

.title {

flex: 1;

}

h1 {

margin: 0;

padding: 0;

font-family: "abril-fatface";

font-size: 16px;

font-weight: 400;

color: white;

text-align: center;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 05, 2019 2
Engaged ,
Jul 05, 2019

Copy link to clipboard

Copied

Hi,

Thank you very much for your reply.

I am adding a Twitter logo to header.

I changed the image file from png to svg. (I think svg gives a better quality of image.)

But I can't make it appear on header. (It appears on Edge.)

How would I do?

Global Invisible Hand

Hosun Kang

Q_Dw_35_Twitter.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 05, 2019 0
osgood_ LATEST
LEGEND ,
Jul 06, 2019

Copy link to clipboard

Copied

1) Dont use captial letters for 'class' names or 'css selector' names - Twitter should be twitter

<div class="twitter">

2) Add some css to reduce the size of the svg image:

.twitter img {

width: 25px;

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 06, 2019 2