CODEWITHSUNDEEP
htmlcssionic-framework
vkv
vkv

Reputation: 1020

How to make a heading with image and text horizontally center?

I have an image and a text. I need the text should follow after the image in a row. And after alignment of both side by side like [image]Time tracker , make both content horizontally center of the screen as a heading of the current page. What i tried to do is given below.

 <div class="row">
      <div class="col-80 col-offset-10">

          <div class="appheadingcenter">

            <img src="img/clock.png" alt="clock" class="clockwidth"></img>
            <div class="timesheettext2">
              <h1 class="timesheettext">
                <b>Timesheet Tracking</b>
              </h1>
            </div>
          </div>

        </div>

        </div>

Upvotes: 3

Views: 1840

Answers (3)

TheQuestioner
TheQuestioner

Reputation: 722

here is a technique using display: flex;

Note: click full page to see the bigger picture of this demo

	.header-frame {
		display: flex;
		align-items: center;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
	}

	.image-frame {
		display: inline-block;
		background: url("https://bobagaming.files.wordpress.com/2015/10/league-of-legends-world-championship-logo-eps-vector-image.png") no-repeat center;
		width: calc(4vw + 4vh);
		height: calc(4vw + 4vh);
		background-size: cover;
	}

	.text-frame {
		font-family: 'Arial';
		font-size: calc(2.5vw + 2.5vh);
		display: inline-block;
		margin: 1vh 1vw;
	}
<div class="header-frame">
	<span class="image-frame"></span>
	<h3 class="text-frame">World Championships</h3>
</div>

Upvotes: 2

Ranish Karim
Ranish Karim

Reputation: 366

<div class="appheadingcenter" style="margin:auto;width:454px;">

                <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" 
        alt="clock" class="clockwidth" style="float: left;max-width: 100px;max-height: 100px;">
                <div class="timesheettext2" style="width: 341px;float: left;">
                  <h1 class="timesheettext">
                    <b>Timesheet Tracking</b>
                  </h1>
                </div>
    </div>

Updated Answer

If you don't want to fix width then use below solution

<div class="appheadingcenter" style="text-align:center;">

      <div style="display: inline-block;">
                <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png" 
        alt="clock" class="clockwidth" style="float: left;max-width: 100px;max-height: 100px;">
                <div class="timesheettext2" style="width: 341px;float: left;">
                  <h1 class="timesheettext">
                    <b>Timesheet Tracking</b>
                  </h1>
                </div>
              </div>
    </div>

Upvotes: 1

ketan
ketan

Reputation: 19341

Just give following css. display:flex will make image and text side by side and justify-content: center; will make it horizontally center.

.appheadingcenter {
    display: flex;
    justify-content: center;
}

Upvotes: 1

Related Questions